Refactor code structure for improved readability and maintainability

modules/pdproductattributeslist/views/css/pdproductattributeslist.css

@@ -1,4 +1,3 @@
-
 #pdproductattributeslist {
   width: 100%;
   margin-top: 15px;
@@ -8,9 +7,8 @@
 
 #pdproductattributeslist table {}
 
-#pdproductattributeslist input.quantity {
+#pdproductattributeslist input.quantity {}
 
-}
 #pdproductattributeslist .old_price {
   font-size: 12px;
   text-decoration: line-through;
@@ -24,6 +22,7 @@
 #pdproductattributeslist .bootstrap-touchspin .input-group-btn-vertical i {
   left: 4px;
 }
+
 #pdproductattributeslist table td.option_infos .product-title {
   text-transform: capitalize;
   margin: .5rem 0;
@@ -32,7 +31,8 @@
 
 /** RESPOINSIVE TABLE **/
 
-#pdproductattributeslist td, #pdproductattributeslist th {
+#pdproductattributeslist td,
+#pdproductattributeslist th {
   vertical-align: middle;
   text-align: center;
   padding-top: .75rem;
@@ -43,22 +43,40 @@
   font-size: 13px;
 }
 
-#pdproductattributeslist td img {max-width: 100%;}
+#pdproductattributeslist .option_image a.hidden {
-
+  display: none;
-#pdproductattributeslist .option_image a.hidden {display:none;}
+}
 
 
-#pdproductattributeslist th.product_image {width:10%;}
+#pdproductattributeslist th.product_image {
+  width: 10%;
+}
+
 #pdproductattributeslist th.product_infos {}
-#pdproductattributeslist th.product_price {width:12%;}
+
-#pdproductattributeslist th.product_variant {width:10%;}
+#pdproductattributeslist th.product_price {
-#pdproductattributeslist th.product_qty {width:10%;}
+  width: 12%;
-#pdproductattributeslist th.product_btn {width:12%;}
+}
+
+#pdproductattributeslist th.product_variant {
+  width: 10%;
+}
+
+#pdproductattributeslist th.product_qty {
+  width: 10%;
+}
+
+#pdproductattributeslist th.product_btn {
+  width: 12%;
+}
 
 
-#pdproductattributeslist .footer_actions { background:#ddd; }
+#pdproductattributeslist .footer_actions {
+  background: #ddd;
+}
 
-#pdproductattributeslist b, #pdproductattributeslist strong {
+#pdproductattributeslist b,
+#pdproductattributeslist strong {
   margin-bottom: 0.3rem;
   display: inline-block;
 }
@@ -70,9 +88,13 @@
 
 
 
-#pdproductattributeslist .option_gty .product-quantity {max-width:200px; }
+#pdproductattributeslist .option_gty .product-quantity {
+  max-width: 200px;
+}
 
-#pdproductattributeslist .product-quantity .qty {width:100%}
+#pdproductattributeslist .product-quantity .qty {
+  width: 100%
+}
 
 #pdproductattributeslist .add-to-cart-pdproductattributeslist {
   width: 100%;
@@ -97,8 +119,7 @@ Max width before this PARTICULAR table gets nasty
 This query will take effect for any screen smaller than 760px
 and also iPads specifically.
 */
-@media
+@media only screen and (max-width: 760px),
-only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
 
   #pdproductattributeslist table {
@@ -122,7 +143,9 @@ only screen and (max-width: 760px),
     left: -9999px;
   }
 
-    #pdproductattributeslist tr { border: 1px solid #ccc; }
+  #pdproductattributeslist tr {
+    border: 1px solid #ccc;
+  }
 
   #pdproductattributeslist td {
     /* Behave  like a "row" */
@@ -171,7 +194,9 @@ only screen and (max-width: 760px),
   bottom: 6.375rem;
 }
 
-#pdproductattributeslist .grid  .add-to-cart-or-refresh {text-align: center;}
+#pdproductattributeslist .grid .add-to-cart-or-refresh {
+  text-align: center;
+}
 
 #pdproductattributeslist .grid input.qtyfield {
   padding: 0 6px;
@@ -200,48 +225,66 @@ only screen and (max-width: 760px),
     margin-bottom: 15px;
     overflow-y: hidden;
     overflow-x: scroll;
-    border: 1px solid #d6d4d4; }
+    border: 1px solid #d6d4d4;
+  }
+
   #pdproductattributeslist .table-responsive>.table {
     margin-bottom: 0;
-      background-color: #fff; }
+    background-color: #fff;
+  }
+
   #pdproductattributeslist .table-responsive>.table>thead>tr>th,
   #pdproductattributeslist .table-responsive>.table>thead>tr>td,
   #pdproductattributeslist .table-responsive>.table>tbody>tr>th,
   #pdproductattributeslist .table-responsive>.table>tbody>tr>td,
   #pdproductattributeslist .table-responsive>.table>tfoot>tr>th,
   #pdproductattributeslist .table-responsive>.table>tfoot>tr>td {
-        white-space: nowrap; }
+    white-space: nowrap;
+  }
+
   #pdproductattributeslist .table-responsive>.table-bordered {
-      border: 0; }
+    border: 0;
+  }
+
   #pdproductattributeslist .table-responsive>.table-bordered>thead>tr>th:first-child,
   #pdproductattributeslist .table-responsive>.table-bordered>thead>tr>td:first-child,
   #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>th:first-child,
   #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>td:first-child,
   #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>th:first-child,
   #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>td:first-child {
-        border-left: 0; }
+    border-left: 0;
+  }
+
   #pdproductattributeslist .table-responsive>.table-bordered>thead>tr>th:last-child,
   #pdproductattributeslist .table-responsive>.table-bordered>thead>tr>td:last-child,
   #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>th:last-child,
   #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>td:last-child,
   #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>th:last-child,
   #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>td:last-child {
-        border-right: 0; }
+    border-right: 0;
+  }
+
   #pdproductattributeslist .table-responsive>.table-bordered>thead>tr:last-child>th,
   #pdproductattributeslist .table-responsive>.table-bordered>thead>tr:last-child>td,
   #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr:last-child>th,
   #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr:last-child>td,
   #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr:last-child>th,
   #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr:last-child>td {
-        border-bottom: 0; }
+    border-bottom: 0;
+  }
 
-      #pdproductattributeslist tr.footer_actions  td {height:50px;}
+  #pdproductattributeslist tr.footer_actions td {
+    height: 50px;
+  }
 }
 
 
 
 #pdproductattributeslist_grid .product-quantity,
-#pdproductattributeslist_grid button.add-to-cart {width:100%;margin-top:10px;}
+#pdproductattributeslist_grid button.add-to-cart {
+  width: 100%;
+  margin-top: 10px;
+}
 
 #pdproductattributeslist_grid .product-quantity .bootstrap-touchspin input.form-control,
 #pdproductattributeslist_grid .product-quantity .bootstrap-touchspin input.input-group {
@@ -249,5 +292,6 @@ only screen and (max-width: 760px),
   height: 2.75rem;
 }
 
-#pdproductattributeslist_grid .product-quantity .bootstrap-touchspin {margin:0 auto;}
+#pdproductattributeslist_grid .product-quantity .bootstrap-touchspin {
-
+  margin: 0 auto;
+}

modules/pdproductattributeslist/views/templates/hook/hookDisplayCustomAttributesListTable.tpl

@@ -1,4 +1,3 @@
-
 {if $product_combinations}
   <div id="pdproductattributeslist" class="products">
 
@@ -29,7 +28,7 @@
 
               {foreach from=$combination.images item=$img}
                 <a href="{$img.large_default}" rel="group_{$combination.id_product_attribute}" class="{if ($img@index > 0)}hidden {/if}fancybox">
-									<img width="{$cartSize.width}" height="{$cartSize.height}"  class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" />
+                  <img class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" />
                 </a>
               {/foreach}
 
@@ -78,7 +77,7 @@
             {/if}
 
             <td data-column="{l s='Quantity on stock' mod='pdproductattributeslist'}" class="option_price">
-						<b>{$combination.quantity}</b> {l s='pcs' mod='pdproductattributeslist'}
+              <b>{if $combination.quantity <= 10 }{$combination.quantity}{else}>10{/if}</b> {l s='pcs' mod='pdproductattributeslist'}
             </td>
 
             {if !$is_catalog}
@@ -96,9 +95,7 @@
     </table>
     <div class="footer_actions">
 
-					<button
+      <button class="btn btn-lg btn-primary add-to-cart-pdproductattributeslist pull-right" type="button">
-						class="btn btn-lg btn-primary add-to-cart-pdproductattributeslist pull-right"
-						type="button">
         {l s='Add selected to cart' mod='pdproductattributeslist'}
       </button>
 

modules/pdproductattributeslist/views/templates/hook/hookDisplayProductTabContent.tpl

@@ -26,11 +26,9 @@
 			{foreach from=$product_combinations item=$combination}
 				<tr class="product_combination_{if ($combination@index % 2)}alternate_{/if}item">
 					<td data-column="{l s='Image' mod='pdproductattributeslist'}" class="option_image">
-
-
 							{foreach from=$combination.images item=$img}
 								<a href="{$img.large_default}" rel="group_{$combination.id_product_attribute}" class="{if ($img@index > 0)}hidden {/if}fancybox">
-									<img width="{$cartSize.width}" height="{$cartSize.height}"  class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" />
+									<img class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" />
 								</a>
 							{/foreach}
 
@@ -79,7 +77,7 @@
 					{/if}
 
 					<td data-column="{l s='Quantity on stock' mod='pdproductattributeslist'}" class="option_price">
-						<b>{$combination.quantity}</b> {l s='pcs' mod='pdproductattributeslist'}
+            <b>{if $combination.quantity <= 10 }{$combination.quantity}{else}>10{/if}</b> {l s='pcs' mod='pdproductattributeslist'}
 					</td>
 
 					{if !$is_catalog}

themes/at_movic/assets/css/custom.scss

@@ -553,12 +553,29 @@ a[href="https://redline.com.pl/pl/zamówienie?newAddress=invoice"] {
   }
 }
 
+#pdproductattributeslist {
+  th {
+    white-space: nowrap;
+
+    &:last-child {
+      width: 130px;
+    }
+  }
+}
+
 .product_combination_item,
 .product_combination_alternate_item {
+  .option_image {
+    img {
+      width: 100%;
+      max-width: 75px;
+    }
+  }
+
   .input-group {
     border: 0 !important;
     display: flex !important;
-    width: 140px;
+    width: 110px;
     gap: 5px;
     justify-content: center;
     align-items: center;
@@ -566,7 +583,7 @@ a[href="https://redline.com.pl/pl/zamówienie?newAddress=invoice"] {
     button.bootstrap-touchspin-down,
     button.bootstrap-touchspin-up {
       border: 1px solid #eee;
-      width: 40px;
+      width: 30px;
       height: 40px;
       display: flex;
       justify-content: center;

themes/at_movic/modules/appagebuilder/views/templates/front/details/detail3382420090.tpl

@@ -7,7 +7,9 @@
 *}
 
 <section id="main" class="product-detail detail-3382420090 product-image-thumbs product-thumbs-bottom" itemscope itemtype="https://schema.org/Product">
-  <meta itemprop="url" content="{$product.url}"><div class="row"><div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12 col-sp-12">
+  <meta itemprop="url" content="{$product.url}">
+  <div class="row">
+    <div class="col-md-5 col-lg-5 col-xl-5 col-sm-12 col-xs-12 col-sp-12">
 
       {block name='page_content_container'}
         <section class="page-content" id="content" data-templateview="bottom" data-numberimage="5" data-numberimage1200="4" data-numberimage992="4" data-numberimage768="3" data-numberimage576="3" data-numberimage480="2" data-numberimage360="2" data-templatemodal="1" data-templatezoomtype="in" data-zoomposition="right" data-zoomwindowwidth="400" data-zoomwindowheight="400">
@@ -18,15 +20,7 @@
                   <div class="list-images-mobile">
                     {foreach from=$product.images item=image}
                       <div>
-                <img
+                        <img class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}" data-image-medium-src="{$image.bySize.medium_default.url}" data-image-large-src="{$image.bySize.large_default.url}" src="{$image.bySize.large_default.url}" alt="{$image.legend}" title="{$image.legend}" itemprop="image">
-                  class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
-                  data-image-medium-src="{$image.bySize.medium_default.url}"
-                  data-image-large-src="{$image.bySize.large_default.url}"
-                  src="{$image.bySize.large_default.url}"
-                  alt="{$image.legend}"
-                  title="{$image.legend}"
-                  itemprop="image"
-                >
                       </div>
                     {/foreach}
                   </div>
@@ -57,30 +51,14 @@
                         {foreach from=$product.images item=image}
                           <div class="thumb-container {if $image.id_image == $product.cover.id_image} active {/if}">
                             <a href="javascript:void(0)" data-image="{$image.bySize.large_default.url}" data-zoom-image="{$image.bySize.large_default.url}">
-                      <img
+                              <img class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}" data-image-medium-src="{$image.bySize.medium_default.url}" data-image-large-src="{$image.bySize.large_default.url}" src="{$image.bySize.home_default.url}" alt="{$image.legend}" title="{$image.legend}" itemprop="image">
-                        class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
-                        data-image-medium-src="{$image.bySize.medium_default.url}"
-                        data-image-large-src="{$image.bySize.large_default.url}"
-                        src="{$image.bySize.home_default.url}"
-                        alt="{$image.legend}"
-                        title="{$image.legend}"
-                        itemprop="image"
-                      >
                             </a>
                           </div>
                         {/foreach}
                       {else}
                         <div class="thumb-container">
                           <a href="javascript:void(0)" data-image="{$urls.no_picture_image.bySize.large_default.url}" data-zoom-image="{$urls.no_picture_image.bySize.large_default.url}">
-                    <img
+                            <img class="thumb js-thumb img-fluid" data-image-medium-src="{$urls.no_picture_image.bySize.medium_default.url}" data-image-large-src="{$urls.no_picture_image.bySize.large_default.url}" src="{$urls.no_picture_image.bySize.home_default.url}" alt="{$product.name}" title="{$product.name}" itemprop="image">
-                      class="thumb js-thumb img-fluid"
-                      data-image-medium-src="{$urls.no_picture_image.bySize.medium_default.url}"
-                      data-image-large-src="{$urls.no_picture_image.bySize.large_default.url}"
-                      src="{$urls.no_picture_image.bySize.home_default.url}"
-                      alt="{$product.name}"
-                      title="{$product.name}"
-                      itemprop="image"
-                    >
                           </a>
                         </div>
                       {/if}
@@ -104,7 +82,8 @@
       {block name='product_images_modal'}
         {include file='catalog/_partials/product-images-modal.tpl'}
       {/block}
-                            </div><div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12 col-sp-12">
+    </div>
+    <div class="col-md-7 col-lg-7 col-xl-7 col-sm-12 col-xs-12 col-sp-12">
       {block name='page_header_container'}
         {block name='page_header'}
           <h1 class="h1 product-detail-name" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
@@ -170,7 +149,9 @@
       {block name='hook_display_reassurance'}
         {hook h='displayReassurance'}
       {/block}
-                            </div><div class="col-md-12 col-lg-12 col-xl-12 col-sm-12 col-xs-12 col-sp-12">
+      {hook h='displayCustomAttributesListTable' product=$product}
+    </div>
+    <div class="col-md-12 col-lg-12 col-xl-12 col-sm-12 col-xs-12 col-sp-12">
       {include file="sub/product_info/tab.tpl"}
       {block name='product_accessories'}
         {if $accessories}
@@ -199,7 +180,6 @@
       {/block}
 
       <script type="text/javascript">
-
         products_list_functions.push(
           function() {
             $('#category-products2').owlCarousel({
@@ -239,12 +219,12 @@
             });
           }
         );
-
       </script>
       {block name='product_footer'}
         {hook h='displayFooterProduct' product=$product category=$category}
       {/block}
-                            </div></div>
+    </div>
+  </div>
   {block name='page_footer_container'}
     <footer class="page-footer">
       {block name='page_footer'}
@@ -253,4 +233,3 @@
     </footer>
   {/block}
 </section>
-