مرحبا اريد كود html لعرض منتج وشرائه بحيث يكون فيه عدة خانت من اسم ولقب وعنوان

Mohamed Lehmissi · 30 مايو 2023

ملاحضة تكون هناك قائمة منسدلة بحيث يختار المحافظة او الولاية التي يسكن فيه وكل محافظة لها سعر توصيل خاص بها

طبعا مع الاسم واللقب والعنوان ومنطقة لكتابة رسالة او ملتحضة من طرف الزبون

كما يمكن اضافة كمية من المنتج وعند الاضافة يتضاعف سعر المنتج

هل يمكن ذلك لان من قبل وجدت موقع من قبل فيه هذه الصفحة

أسامة زيادة · 30 مايو 2023

هذا كود مشابه لمتطلباتك

<!DOCTYPE html>
<html>
<head>
  <title>عرض المنتج وشرائه</title>
</head>
<body>
  <h1>عرض المنتج</h1>
  
  <form>
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="last_name">اللقب:</label>
    <input type="text" id="last_name" name="last_name"><br><br>
    
    <label for="address">العنوان:</label>
    <input type="text" id="address" name="address"><br><br>
    
    <label for="city">المحافظة/الولاية:</label>
    <select id="city" name="city">
      <option value="محافظة 1">محافظة 1</option>
      <option value="محافظة 2">محافظة 2</option>
      <option value="محافظة 3">محافظة 3</option>
    </select><br><br>
    
    <label for="quantity">الكمية:</label>
    <input type="number" id="quantity" name="quantity" min="1"><br><br>
    
    <label for="message">الرسالة:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
    
    <input type="submit" value="شراء المنتج">
  </form>
  
  <script>
    document.querySelector('form').addEventListener('submit', function(event) {
      event.preventDefault(); // تمنع إعادة تحميل الصفحة عند الضغط على زر الإرسال
      
      // استخراج القيم من النموذج
      var name = document.getElementById('name').value;
      var last_name = document.getElementById('last_name').value;
      var address = document.getElementById('address').value;
      var city = document.getElementById('city').value;
      var quantity = document.getElementById('quantity').value;
      var message = document.getElementById('message').value;
      
      // حساب سعر المنتج
      var price = 10; // السعر الأصلي للمنتج
      var delivery_fee = 0; // رسوم التوصيل
      
      // تعيين سعر التوصيل بناءً على المحافظة/الولاية المحددة
      if (city === 'محافظة 1') {
        delivery_fee = 5;
      } else if (city === 'محافظة 2') {
        delivery_fee = 8;
      } else if (city === 'محافظة 3') {
        delivery_fee = 10;
      }
      
      // حساب السعر الإجمالي
      var total_price = price * quantity + delivery_fee;
      
      // عرض تفاصيل الشراء
      var purchase_details = 'اسم: ' + name + '<br>' +
                            'لقب: ' + last_name + '<br>' +
                            'عنوان: ' + address + '<br>' +
                            'محافظة/ولاية: ' + city + '<br>' +
                            'الكمية: ' + quantity + '<br>' +
                            'السعر الإجمالي: ' + total_price + '<br>' +
                            'الرسالة: ' + message;
      
      document.write('<h2>تفاصيل الشراء</h2>');
      document.write(purchase_details);
    });
  </script>
  
</body>
</html>

يُرجى ملاحظة أن الكود السابق يعتمد على JavaScript لحساب السعر الإجمالي وعرض تفاصيل الشراء عند الضغط على زر "شراء المنتج". ستتم إضافة تفاصيل الشراء بعد النموذج.

يمكنك تخصيص القائمة المنسدلة لتحتوي على محافظات أو ولايات أخرى، وتحديد الأسعار المناسبة لكل محافظة/ولاية حسب متطلباتك.

عمر قره محمد · 30 مايو 2023

نعم يمكن كتابة مثل هذا الكود بالفعل، ولكن نحن هنا نقوم بمساعدة المبرمجين وليس بناء الصفحات بالكامل.

يمكنك توظيف مبرمج لكتابة مثل هذا الكود لك من موقع مستقل من هنا أو من موقع خمسات من هنا

أو يمكنك التعلم اكثر عن html في حال اردت بناء الصفحة بنفسك من هنا :

https://academy.hsoub.com/programming/html/أساسيات-إنشاء-موقع-ويب-باستخدام-تعليمات-html-r1894/

https://academy.hsoub.com/programming/html/تعلم-لغة-html-r1702/

وهذا كود مبسط عن كيفية القيام بذلك :

<!DOCTYPE html>
<html>
<head>
  <title>نموذج شراء المنتج</title>
</head>
<body>
  <form>
    <label for="fname">الاسم الأول:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">اسم العائلة:</label><br>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="address">العنوان:</label><br>
    <input type="text" id="address" name="address"><br><br>
    <label for="state">اختر المحافظة:</label><br>
    <select name="state" id="state">
      <option value="">--اختر المحافظة--</option>
      <option value="1">المحافظة 1</option>
      <option value="2">المحافظة 2</option>
      <option value="3">المحافظة 3</option>
    </select><br><br>
    <label for="quantity">الكمية:</label><br>
    <input type="number" id="quantity" name="quantity" min="1"><br><br>
    <label for="message">رسالة:</label><br>
    <textarea id="message" name="message"></textarea><br><br>
    <input type="submit" value="إرسال">
  </form> 
  <p>التكلفة الإجمالية: <span id="total"></span></p>

  <script>
    // سعر المنتج
    var price = 10;
    
    // سعر التوصيل لكل محافظة
    var deliveryPrices = {
      "1": 5,
      "2": 7,
      "3": 10
    };
    
    // حساب التكلفة الإجمالية
    function calculateTotal() {
      var quantity = document.getElementById("quantity").value;
      var state = document.getElementById("state").value;
      var deliveryPrice = deliveryPrices[state];
      var total = (price * quantity) + deliveryPrice;
      document.getElementById("total").textContent = total;
    }
    
    // إضافة مستمع للحدث على حقول الإدخال
    document.getElementById("quantity").addEventListener("input", calculateTotal);
    document.getElementById("state").addEventListener("change", calculateTotal);
  </script>
</body>
</html>

عبدالباسط ابراهيم · 30 مايو 2023

كما أخبرك عمر أنه يمكنك توظيف مبرمج على مصنات العمل العمل لتنفيذ ذلك أو يمكنك بناء الصفحة بنفسك بالإستعانة بالمصادر في التعليق السابق أو يمكنك استخدام المنصات التالية لتنفيذ ذلك الموقع من خلال قالب مجاني

توجد خدمات ومصادر جاهزة يمكنك استخدامها لبناء صفحة شراء متطورة بدون الحاجة للكود الخاص بك. بعض الخيارات:

WooCommerce: هو إضافة WordPress شعبية لبناء متجر تجاري إلكتروني. يمكنك بناء صفحات شراء وفواتير ومنتجات بسهولة.
Shopify: منصة بناء المواقع التجارية الإلكترونية الشاملة. تقدم خدمة بناء صفحة شراء وتوصيل بسيطة ومتكاملة.
Snipcart: خدمة بناء صفحات شراء بسيطة ومتكاملة. تقوم بإضافة المنتجات وحساب التوصيل بشكل تلقائي.
BigCommerce: منصة تجارة إلكترونية تقدم إمكانية بناء صفحة شراء متكاملة ومتقدمة. تدعم خيارات عديدة للتوصيل وحساب التكاليف.

هذه بعض الخيارات، تركز على اختيار المنصة الأكثر انسجامًا مع احتياجاتك وميزانيتك، ثم قم ببناء صفحة الشراء عليها.

مرحبا اريد كود html لعرض منتج وشرائه بحيث يكون فيه عدة خانت من اسم ولقب وعنوان

السؤال

Mohamed Lehmissi

3 أجوبة على هذا السؤال

Recommended Posts

أسامة زيادة

عمر قره محمد

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية