توجيه المستخدم لصفحة المنتج بعد النقر عليه HTML / jquery

تبدأ هذه الفكرة من backend حيث يتم تمرير خاصية html مثل data-product-id=1234asfgv ضمن هيكلية هذا العنصر. ونقوم بإسناد معرف id العنصر لها، و في حال النقر على العنصر نقرأ product-id ومن ثم نقوم بعمل توجيه لصفحة خاصة بعرض المنتجات مع تمرير معرف العنصر ويمكن ذلك من خلال GET params مثلا، حيث أنه في المتحكم الخاص بعرض المنتجات نستعلم حسب id الممرر بعمل استعلام لقاعدة البيانات ثم نحقن البيانات في صفحة عرض النموذج.

 كما يمكن ذلك من خلال AJAX نقرأ url الصفحة الخاصة بالمنتجات (عندما نكون داخلها) و نستخلص product-id ثم نجلب بياناته و نحدث الصفحة

بتاريخ On 22‏/3‏/2022 at 11:50 قال Wael Aljamal:

تبدأ هذه الفكرة من backend حيث يتم تمرير خاصية html مثل data-product-id=1234asfgv ضمن هيكلية هذا العنصر. ونقوم بإسناد معرف id العنصر لها، و في حال النقر على العنصر نقرأ product-id ومن ثم نقوم بعمل توجيه لصفحة خاصة بعرض المنتجات مع تمرير معرف العنصر ويمكن ذلك من خلال GET params مثلا، حيث أنه في المتحكم الخاص بعرض المنتجات نستعلم حسب id الممرر بعمل استعلام لقاعدة البيانات ثم نحقن البيانات في صفحة عرض النموذج.

 كما يمكن ذلك من خلال AJAX نقرأ url الصفحة الخاصة بالمنتجات (عندما نكون داخلها) و نستخلص product-id ثم نجلب بياناته و نحدث الصفحة

هذا ما قمت بفعله ..

هل ما قمت به جيد ؟ ام انه معقد بعض الشيء وهل هناك اي اضافات من الممكن ان تفيدني ؟

js :

$.ajax({
    type: 'GET',
    url: `${serverAddress}/product/getAll`,
    success: (Products) => {
        
      for(let i = 0; i < Products.length; i++)  { 
        const product = Products[i];

        // تشفير ال id الخاص بالمنتج
        var proId = btoa(product._id)
      
        var putPro = `
        <div class="col-xs-6 col-lg-3 col-6 gy-3 product" data-product-id="${product._id}">
        <a href="${serverAddress}/product-page?id=${proId}" class="text-dark show-product">
          show me !
        </a>
    </div>
        `

        $('#product-our-offers').append(putPro);
      }
    },
    error: (err) => {
    }
  })

js :

if(window.location.href.indexOf('id') >-1) {

  var proId =  new URLSearchParams(window.location.search).get('id');

  // فك التشفير ال id الخاص بالمنتج
  var id = atob(proId)


  $.ajax({
    type: 'POST',
    url: `${serverAddress}/product/proInfo`,
    data: {id:id},
    success: (Product) => {

      var product = Product

      var showPro = `
  <div class="col-6">
  <a class="zoom-proImg">
  <img width="100%"  class="product-img" src="${serverAddress}${product.proImg}" alt="">
  </a>
  </div>
    `

  $('#pro-info').append(showPro)
    },
    error: (err) => {
      alert('err')
    }
  })

}

node js

module.exports = (app) => {
    const path = require('path');
    
    app.get('/product-page', (req,res) => {
        res.sendFile(path.join(__dirname, "../public/views/category/product-page.html"));
    })
}

node js

module.exports = (app) => {
    const productController = require('../controllers/productController');
    const path = require('path');

    app.post('/product/add' , productController.addProduct);

    app.post('/product/proInfo',productController.proInfo);

    app.get('/product/getAll' , productController.getAll);


}

node js productController

exports.proInfo = async (req,res) => {

    var id = req.body.id

    await Product.findOne({_id:id})
    .then(product => {
        res.status(200).send(product);
    }).catch(err => {
        res.status.send(500)
    })
}

شكرا .

بتاريخ 1 دقيقة مضت قال Samer Alashqar:

هل ما قمت به جيد ؟ ام انه معقد بعض الشيء وهل هناك اي اضافات من الممكن ان تفيدني ؟

هل يعمل بطريقة جيدة أو تواجه أي مشكلة؟

الشيفرة جيدة أحسنت

بتاريخ 46 دقائق مضت قال Wael Aljamal:

هل يعمل بطريقة جيدة أو تواجه أي مشكلة؟

الشيفرة جيدة أحسنت

نعم تعمل بشكل ممتاز لكن ربما هناك بعض النقاط التي غفلت عنها لذلك قمت بالسؤال 

شكرا لك