https://daalderop.id/wp-content/themes/flatsome-child/assets/js/product-script.js?ver=1753328232

1/*============================================
2// PRODUCT
3============================================*/
4/* set header transparent for page product */
5jQuery("#wrapper:has(.product-content-header) #header").addClass(
6  "transparent has-transparent"
7);
8jQuery("#wrapper:has(.product-content-header) #header #masthead").addClass(
9  "nav-dark toggle-nav-dark"
10);
11
12// DANAR -> Single Product Page Produk melewati banner dan product text styling
13function createWordBreak(productTitle) {
14  const word = productTitle?.text().trim().split(" ");
15  productTitle?.html(
16    `${word[0]} ${word[1]} ${word[2]}`
17  );
18}
19
20function initiateProdukStyle(productTitle, capacity) {
21  if (capacity) {
22    productTitle.after(`
23      <style>
24        .single.single-product .section.product-content-header .product-title br {
25          display: none;
26        }
27    
28        @media only screen and (max-width: 425px) {
29          .single.single-product .section.product-content-header .product-title br {
30            display: block;
31          }
32        }
33        
34        @media only screen and (max-width: 334px) {
35          .single.single-product .section.product-content-header .product-title br {
36            display: none;
37          }
38        }
39      </style>
40    `);
41  }
42
43  if (capacity == "15 L" || capacity == "30 L") {
44    productTitle.after(
45      `<style>
46          @media only screen and (min-width: 850px) {
47              .single.single-product .section.product-content-header .product-img img {
48                  object-fit: cover;
49                  object-position: 100% 90%;
50              }
51          }
52      </style>`
53    );
54  }
55
56  if (capacity == "50 L") {
57    productTitle.after(
58      `<style>
59          @media only screen and (min-width: 850px) {
60              .single.single-product .section.product-content-header .product-img img {
61                  object-fit: cover;
62                  object-position: 100% 90%;
63              }
64              .single.single-product .section.product-content-header .image-cover img {
65                  width: 90%;
66              }
67          }
68      </style>`
69    );
70  }
71
72  if (capacity == "50 L" || capacity == "80 L") {
73    productTitle.after(
74      `<style>
75        @media (min-width: 34em) and (max-width: 849px) {
76          .single.single-product .section.product-content-header .product-img img {
77            object-fit: contain;
78            object-position: 50% -35px;
79          }
80
81          .single.single-product .section.product-content-header .img-inner.image-cover.dark {
82            transform: scale(1.4);
83          }
84
85          .single.single-product .section.product-content-header .img-inner.image-cover.dark {
86            padding-top: 230px;
87          }
88        }
89
90        @media only screen and (max-width: 34em) {
91          .single.single-product .section.product-content-header .product-img img {
92            object-fit: cover;
93            object-position: 100% 85%;
94          }
95        }
96      </style>`
97    );
98  }
99
100  if (capacity == "15 L") {
101    productTitle.after(
102      `<style>
103          @media only screen and (max-width: 34em) {
104              .single.single-product .section.product-content-header .product-img img {
105                  object-fit: none;
106                  object-position: 50% 90%;
107              }
108          }
109          @media (min-width: 390px) and (max-width: 34em) {
110              .single.single-product .section.product-content-header .product-img img {
111                  object-position: 50% 120%;
112                  transform: scale(1.25);
113              }
114          }
115          @media (min-width: 350px) and (max-width: 390px) {
116              .single.single-product .section.product-content-header .product-img img {
117                  object-position: 50% 105%;
118                  transform: scale(1.2);
119              }
120          }
121          
122          @media (min-width: 34em) and (max-width: 849px) {
123            .single.single-product .section.product-content-header .product-img img {
124                object-fit: contain;
125                object-position: 50% -45px;
126            }
127
128            .single.single-product .section.product-content-header .img-inner.image-cover.dark {
129               transform: scale(1.8);
130            }
131    
132            .single.single-product .section.product-content-header .img-inner.image-cover.dark {
133                padding-top: 230px;
134            }
135        }
136      </style>`
137    );
138  }
139
140  if (capacity == "30 L") {
141    productTitle.after(
142      `<style>
143          @media only screen and (max-width: 34em) {
144              .single.single-product .section.product-content-header .product-img img {
145                  object-fit: cover;
146                  object-position: 100% 100%;
147              }
148          }
149
150          @media (min-width: 34em) and (max-width: 849px) {
151            .single.single-product .section.product-content-header .product-img img {
152                object-fit: contain;
153                object-position: 50% -40px;
154            }
155
156            .single.single-product .section.product-content-header .img-inner.image-cover.dark {
157               transform: scale(1.6);
158            }
159    
160            .single.single-product .section.product-content-header .img-inner.image-cover.dark {
161                padding-top: 230px;
162            }
163        }
164
165      </style>`
166    );
167  }
168
169  if (capacity == "120 L" || capacity == "150 L") {
170    productTitle.after(
171      `<style>
172      @media (min-width: 34em) and (max-width: 849px) {
173          .single.single-product .section.product-content-header .product-img img {
174              object-fit: contain;
175              object-position: 50% 0;
176          }
177
178          .single.single-product .section.product-content-header .img-inner.image-cover.dark {
179            transform: scale(1);
180          }
181
182          .single.single-product .section.product-content-header .img-inner.image-cover.dark {
183              padding-top: 230px;
184          }
185      }
186      </style>`
187    );
188  }
189}
190
191function initSingleProduct() {
192  const currentCapacity = jQuery(
193    ".single.single-product .section.product-content-body .item-value.product-capacity"
194  )
195    ?.text()
196    .trim();
197  const productTitle = jQuery(
198    ".single.single-product .section.product-content-header .product-title"
199  );
200  createWordBreak(productTitle);
201  initiateProdukStyle(productTitle, currentCapacity);
202
203  const productBtn = jQuery(
204    ".single.single-product .section.custom-slider .swiper.productSlider .product-small .text-box a:last-child"
205  );
206  productBtn?.on("click", function () {
207    const capacity = jQuery(this).siblings(".product-capacity")?.text().trim();
208    productTitle?.siblings("style").remove();
209
210    jQuery(document).ajaxStop(function () {
211      createWordBreak(productTitle);
212    });
213    initiateProdukStyle(productTitle, capacity);
214  });
215
216  // Only init in single page
217  if(jQuery('.single.single-product').length) {
218    // Scroll To Detail
219    jQuery("html, body").animate(
220      {
221        scrollTop:
222          jQuery(".product-content-header").offset().top -
223          jQuery(".header-main").height() * 1.5 - 100
224      },
225      1500
226    );
227  }
228}
229initSingleProduct();
230
231console.log("product script loaded");