How to integrate a product card on Diafan?

O

Oleg Pugovkin2017-04-24 17:01:02

CMS

Oleg Pugovkin, 2017-04-24 17:01:02

There is a product card - lightseeker.ru/sepo/goods-card.html
The choice of design integration fell on CMS Diafan - https://www.diafan.ru
The task is to correctly integrate the product card into the CMS.
Now it looks like this - lightseeker.ru/katalog/kholodilniki-odnokamernye/s... , i.e., the layout is just inserted. And at the end, a photo of the product is inserted, but already dynamically. Some knowledge of PHP is needed here, and in PHP I am not strong (yet).
In the template, I output the layout like this:

//Custom - start
//echo '<code>'.json_encode($result).'</code>';
if(! empty($result["names_param"]["Масса"])) {
 echo '<div class="card-title-main">'.$result["name"].'</div>
         <div class="card-img-cont">
           
           <a class="fancybox" rel="group" href="/img/catalog/card/full/467/saratov-467-side-open.jpg"><img class="big-img-goods" src="/img/catalog/card/full/467/saratov-467-side-open.jpg" alt="" width="111" height="162" border="0" complete="complete"></a>
           
           <div class="thumbnail-cont">
             
             
            <a class="img-cert fancybox" rel="group" href="/img/catalog/card/full/467/saratov-467-closed.jpg"><img class="card-thumbnail1" src="/img/catalog/card/thumbnail/467/saratov-467-closed-thumbnail.jpg" alt="" width="84" height="105" border="0" complete="complete"></a>
             
           <a class="img-cert fancybox" rel="group" href="/img/catalog/card/full/467/saratov-467-side-full.jpg"><img class="card-thumbnail1" src="/img/catalog/card/thumbnail/467/saratov-467-side-thumbnail.jpg" alt="" width="84" height="105" border="0" complete="complete"></a>
           
           <a class="img-cert fancybox" rel="group" href="/img/catalog/card/full/467/saratov-467-front-empty.jpg"><img class="card-thumbnail1" src="/img/catalog/card/thumbnail/467/saratov-467-front-empty-thumbnail.jpg" alt="" width="84" height="105" border="0" complete="complete"></a>
           
           <a class="img-cert fancybox" rel="group" href="/img/catalog/card/full//467/saratov-467-front-open.jpg"><img class="card-thumbnail1" src="/img/catalog/card/thumbnail/467/saratov-467-front-open-thumbnail.jpg" alt="" width="84" height="105" border="0" complete="complete"></a>
           
           <a class="img-cert fancybox" rel="group" href="/img/catalog/card/full/467/satatov-467-front.jpg"><img class="card-thumbnail1" src="/img/catalog/card/thumbnail/467/satatov-467-front-thumbnail.jpg" alt="" width="84" height="105" border="0" complete="complete"></a>
           </div>
         </div>
         <div class="card-features">
           <div class="card-features-title">Технические характеристики</div>
           <div class="card-features-text-cont">
             <div class="size-text features-text-fat">Габаритные размеры</div>';
             echo '<div class="mass features-text-normal">Масса, кг<span>'.$result["names_param"]["Масса"]["value"].'</span></div>';
             echo '<div class="height features-text-normal">Высота, мм<span>'.$result["names_param"]["Высота"]["value"].'</span></div>
             <div class="height features-text-normal">Ширина, мм<span>'.$result["names_param"]["Ширина"]["value"].'</span></div>
             <div class="depth features-text-normal">Глубина, мм<span>'.$result["names_param"]["Глубина"]["value"].'</span></div>
             <div class="freezer-chamber-text features-text-fat">Морозильная камера</div>
             <div class="volume features-text-normal">Объём морозильного отделения, куб. дм<span>'.$result["names_param"]["Объём морозильного отделения"]["value"].'</span></div>
             <div class="temperature-text features-text-fat">Температура</div>
             <div class="temp-notover features-text-normal">Температура в морозильном отделении Сº, не выше<span>'.$result["names_param"]["Температура в морозильном отделении"]["value"].'</span></div>
             <div class="temp-medium features-text-normal">Средняя температура в холодильнике, Сº<span class="temp-span">'.$result["names_param"]["Средняя температура в холодильнике"]["value"].'</span></div>
             <div class="compressor-text features-text-fat">Компрессор</div>
             <div class="compressors-amount features-text-normal">Количество компрессоров<span>'.$result["names_param"]["Количество компрессоров"]["value"].'</span></div>
             <!--<div class="compressors-type features-text-normal">Тип компрессора<span>стандарт</span></div>-->
             <div class="power-consumption-class-text features-text-fat">Класс энергопотребления</div>
             <!--<div class="power-efficiency features-text-normal">Энергоэффективность<span>A</span></div>-->
             <div class="power-consumption features-text-normal">Расход электроэнергии кВт/24 ч<span>'.$result["names_param"]["Расход электроэнергии"]["value"].'</span></div>
             <div class="guarantee-text features-text-fat">Гарантия</div>
             <div class="guarantee-date features-text-normal">Срок гарантии, лет<span>'.$result["names_param"]["Срок гарантии"]["value"].'</span></div>
           </div>
           <div class="warning-text">Производитель на свое усмотрение и без дополнительных уведомлений может менять комплектацию, внешний вид и технические характеристики холодильных приборов без ухудшения их потребительских свойств. Потребительские свойства товара необходимо уточнить в момент его приобретения.</div>
         </div>';
}


//Custom - end

And the code for displaying added photos in the CMS by default looks like this:

//вывод изображений товара
if (!empty($result["img"]))
{
  echo '<div class="js_shop_all_img shop_all_img shop-item-big-images card-img-cont">';
  $k = 0;
  foreach ($result["img"] as $img)
  {
    switch ($img["type"])
    {
      case 'animation':
        echo '<a class="js_shop_img shop-item-image fancybox img-cert'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" rel="prettyPhoto[gallery'.$result["id"].'shop]" image_id="'.$img["id"].'">';
        break;
      case 'large_image':
        echo '<a class="js_shop_img shop-item-image fancybox img-cert'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" rel="large_image" width="'.$img["link_width"].'" height="'.$img["link_height"].'" image_id="'.$img["id"].'">';
        break;
      default:
        echo '<a class="js_shop_img shop-item-image fancybox img-cert'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" image_id="'.$img["id"].'">';
        break;
    }
    echo '<img src="'.BASE_PATH.$img["link"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="shop_id_img">';
    echo '</a>';
    $k++;
  }
}

Question: how to insert layout there? Will PHP need to be changed? If necessary, I will give access to the admin panel and FTP hosting. I fight for a week. I'm thinking about taking a PHP course. Otherwise, I won’t master it yet.