اذهب إلى المحتوى
  • 0

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

Mohamed Lehmissi

السؤال

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

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

<!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 لحساب السعر الإجمالي وعرض تفاصيل الشراء عند الضغط على زر "شراء المنتج". ستتم إضافة تفاصيل الشراء بعد النموذج.

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

أو يمكنك التعلم اكثر عن 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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...