tabexseriescomponents 0.0.775 → 0.0.777

package/dist/index.cjs.js

@@ -73012,8 +73012,8 @@ var CardBadgeSlideFromTop = function CardBadgeSlideFromTop(props) {
   }, plainString(langdetect == 'en' ? item.description_en : item.description_ar))))));
 };
 
-var css_248z$c = ".Productccard_with_zoominonhover-module_productcard__8ASdR {\n\tposition: relative;\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\tposition: absolute;\n\ttop: 5px;\n\tright: 5px;\n\topacity: 0;\n\ttransition: .3s\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl {\n\tposition: relative;\n\tz-index: 1\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\topacity: 1;\n\tz-index: 8\n}\n.Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(10px);\n\ttransition: .3s;\n\ttransition-property: transform;\n\tdisplay: block\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(0)\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_product_details__3SLId {\n\tpadding-top: 10px ;\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t/* display: none; */\n\tpadding: 0 10px;\n\t/* width: 101% !important;\n\tleft: -1px; */\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK .Productccard_with_zoominonhover-module_price__12djA {\n\tdisplay: none\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\tdisplay: block;\n\tz-index: 1000 !important\n}\n@media screen and (max-width:800px) {\n\t.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t\tdisplay: block !important;\n\t\t/* border:none !important */\n\t}\n}";
-var cardsstyles$4 = {"productcard":"Productccard_with_zoominonhover-module_productcard__8ASdR","card_thumbnail":"Productccard_with_zoominonhover-module_card_thumbnail__xCWyB","wishlistbtn":"Productccard_with_zoominonhover-module_wishlistbtn__-9K6V","card_inner":"Productccard_with_zoominonhover-module_card_inner__-pVNl","product_details":"Productccard_with_zoominonhover-module_product_details__3SLId","card_informationcontainer":"Productccard_with_zoominonhover-module_card_informationcontainer__suyHK","price":"Productccard_with_zoominonhover-module_price__12djA"};
+var css_248z$c = ".Productccard_with_zoominonhover-module_productcard__8ASdR {\n\tposition: relative;\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\tposition: absolute;\n\ttop: 5px;\n\tright: 5px;\n\topacity: 0;\n\ttransition: .3s\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl {\n\tposition: relative;\n\tz-index: 1\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\topacity: 1;\n\tz-index: 8\n}\n.Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(10px);\n\ttransition: .3s;\n\ttransition-property: transform;\n\tdisplay: block\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(0)\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_product_details__3SLId {\n\tpadding-top: 10px ;\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t/* display: none; */\n\tpadding: 0 10px;\n\t/* width: 101% !important;\n\tleft: -1px; */\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK .Productccard_with_zoominonhover-module_price__12djA {\n\tdisplay: none\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\tdisplay: block;\n\tz-index: 1000 !important\n}\n@media screen and (max-width:800px) {\n\t.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t\tdisplay: block !important;\n\t\t/* border:none !important */\n\t}\n}\n.Productccard_with_zoominonhover-module_intialimage__8hcdc {\n    visibility: visible !important;\n    opacity: 1 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_secondaryimage__EHpKK {\n    visibility: hidden !important;\n\n    opacity: 0 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n\n.Productccard_with_zoominonhover-module_img_container__lSsmX:hover .Productccard_with_zoominonhover-module_intialimage__8hcdc {\n    visibility: hidden !important;\n\n    opacity: 0 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_img_container__lSsmX:hover .Productccard_with_zoominonhover-module_secondaryimage__EHpKK {\n    visibility: visible !important;\n\n    opacity: 1 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_img_container__lSsmX {\n    transition: all 0.4s !important;\n    position: relative !important;\n}";
+var cardsstyles$4 = {"productcard":"Productccard_with_zoominonhover-module_productcard__8ASdR","card_thumbnail":"Productccard_with_zoominonhover-module_card_thumbnail__xCWyB","wishlistbtn":"Productccard_with_zoominonhover-module_wishlistbtn__-9K6V","card_inner":"Productccard_with_zoominonhover-module_card_inner__-pVNl","product_details":"Productccard_with_zoominonhover-module_product_details__3SLId","card_informationcontainer":"Productccard_with_zoominonhover-module_card_informationcontainer__suyHK","price":"Productccard_with_zoominonhover-module_price__12djA","intialimage":"Productccard_with_zoominonhover-module_intialimage__8hcdc","secondaryimage":"Productccard_with_zoominonhover-module_secondaryimage__EHpKK","img_container":"Productccard_with_zoominonhover-module_img_container__lSsmX"};
 styleInject(css_248z$c);
 
 function ownKeys$w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -73040,20 +73040,24 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
   var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
   var NotificationManager = props.actions.NotificationManager;
   var ikimagecredcontext = props.actions.ikimagecredcontext;
-  var _useState5 = React.useState(''),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2);
-    _useState6[0];
-    _useState6[1];
   React.useEffect(function () {
-    var secpropobj = {};
-    StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
-      if (sectionitem.sectionid == props.sectionidprops) {
-        sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
-          secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
-        });
-      }
-    });
-    setsectionproperties(_objectSpread$w({}, secpropobj));
+    if (props.srcfrom == 'addsectionform') {
+      var secpropobj = {};
+      props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
+        secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
+      });
+      setsectionproperties(_objectSpread$w({}, secpropobj));
+    } else {
+      var secpropobj = {};
+      StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+        if (sectionitem.sectionid == props.sectionidprops) {
+          sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+            secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+          });
+        }
+      });
+      setsectionproperties(_objectSpread$w({}, secpropobj));
+    }
   }, [StatePagePropertiesContext]);
   React.useEffect(function () {
     setitem(props.cardinfoitemprops);
@@ -73061,6 +73065,8 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
   var updatequantity = function updatequantity(type) {
     var tempitem = _objectSpread$w({}, item);
     tempitem.quantity = 0;
+    setitem(_objectSpread$w({}, tempitem));
+    tempitem.quantity = parseInt(tempitem.quantity);
     if (type == 'add') {
       tempitem.quantity = tempitem.quantity + 1;
     } else if (type == 'remove') {
@@ -73097,6 +73103,74 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       AddtoCartContext(addtocardpayloadobj);
     }
   };
+  var _useState5 = React.useState(''),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    secondimage = _useState6[0],
+    setsecondimage = _useState6[1];
+  React.useEffect(function () {
+    var _props$cardinfoitempr;
+    setitem(props.cardinfoitemprops);
+    if ((props === null || props === void 0 || (_props$cardinfoitempr = props.cardinfoitemprops) === null || _props$cardinfoitempr === void 0 || (_props$cardinfoitempr = _props$cardinfoitempr.productimages) === null || _props$cardinfoitempr === void 0 ? void 0 : _props$cardinfoitempr.length) == 1) {
+      var _props$cardinfoitempr2;
+      setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr2 = props.cardinfoitemprops) === null || _props$cardinfoitempr2 === void 0 ? void 0 : _props$cardinfoitempr2.image);
+    } else {
+      var _props$cardinfoitempr3, _props$cardinfoitempr4;
+      if ((props === null || props === void 0 ? void 0 : props.cardinfoitemprops) != undefined && (props === null || props === void 0 || (_props$cardinfoitempr3 = props.cardinfoitemprops) === null || _props$cardinfoitempr3 === void 0 ? void 0 : _props$cardinfoitempr3.productimages) != undefined && Array.isArray(props === null || props === void 0 || (_props$cardinfoitempr4 = props.cardinfoitemprops) === null || _props$cardinfoitempr4 === void 0 ? void 0 : _props$cardinfoitempr4.productimages)) {
+        var _props$cardinfoitempr5, _props$cardinfoitempr6, _props$cardinfoitempr7;
+        if ((props === null || props === void 0 || (_props$cardinfoitempr5 = props.cardinfoitemprops) === null || _props$cardinfoitempr5 === void 0 ? void 0 : _props$cardinfoitempr5.productimages[0]) != undefined && (props === null || props === void 0 || (_props$cardinfoitempr6 = props.cardinfoitemprops) === null || _props$cardinfoitempr6 === void 0 || (_props$cardinfoitempr6 = _props$cardinfoitempr6.productimages[0]) === null || _props$cardinfoitempr6 === void 0 ? void 0 : _props$cardinfoitempr6.path) == (props === null || props === void 0 || (_props$cardinfoitempr7 = props.cardinfoitemprops) === null || _props$cardinfoitempr7 === void 0 ? void 0 : _props$cardinfoitempr7.image)) {
+          var _props$cardinfoitempr8;
+          if ((props === null || props === void 0 || (_props$cardinfoitempr8 = props.cardinfoitemprops) === null || _props$cardinfoitempr8 === void 0 || (_props$cardinfoitempr8 = _props$cardinfoitempr8.productimages[1]) === null || _props$cardinfoitempr8 === void 0 ? void 0 : _props$cardinfoitempr8.length) != 0) {
+            var _props$cardinfoitempr9;
+            setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr9 = props.cardinfoitemprops) === null || _props$cardinfoitempr9 === void 0 || (_props$cardinfoitempr9 = _props$cardinfoitempr9.productimages[1]) === null || _props$cardinfoitempr9 === void 0 ? void 0 : _props$cardinfoitempr9.path);
+          } else {
+            var _props$cardinfoitempr10;
+            setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr10 = props.cardinfoitemprops) === null || _props$cardinfoitempr10 === void 0 ? void 0 : _props$cardinfoitempr10.image);
+          }
+        } else {
+          var _props$cardinfoitempr11;
+          setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr11 = props.cardinfoitemprops) === null || _props$cardinfoitempr11 === void 0 || (_props$cardinfoitempr11 = _props$cardinfoitempr11.productimages[0]) === null || _props$cardinfoitempr11 === void 0 ? void 0 : _props$cardinfoitempr11.path);
+        }
+      }
+    }
+  }, [props.cardinfoitemprops]);
+  var Image = function Image(type) {
+    var transition = false;
+    if (sectionproperties.hideshowcardtransition == 'Show' && type != 'responsive') {
+      transition = true;
+    }
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "w-100 cursor-pointer h-100",
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
+      "class": transition ? cardsstyles$4.intialimage : '',
+      urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+      publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+      path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
+      loading: "lazy",
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain'
+      }
+    }), transition && /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
+      "class": cardsstyles$4.secondaryimage,
+      urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+      publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+      path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + secondimage,
+      loading: "lazy",
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain'
+      }
+    }));
+  };
+  var _useState7 = React.useState(0),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2);
+    _useState8[0];
+    _useState8[1];
   var cardsstyles2 = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -73176,8 +73250,7 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       transition: '.3s',
       ':hover': {
         background: sectionproperties.cartbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColoronhover,
-        color: sectionproperties.cartBtnTextcoloronhover,
-        borderColor: sectionproperties.cartBtnTextcoloronhover
+        color: sectionproperties.cartBtnTextcoloronhover
       }
     }),
     img_container: glamor.css({
@@ -73209,7 +73282,10 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       position: 'relative',
       fontWeight: sectionproperties.quantitybtn_textfontweight,
       color: sectionproperties.quantitybtn_textcolor,
-      fontSize: sectionproperties.quantitybtn_textfontsize + 'px'
+      fontSize: sectionproperties.quantitybtn_textfontsize + 'px',
+      '@media (max-width: 800px)': {
+        width: '100%'
+      }
     }),
     quantitybtn_text: glamor.css({
       margin: 'auto'
@@ -73324,10 +73400,6 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       })), langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic);
     }
   };
-  var _useState7 = React.useState(0),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2);
-    _useState8[0];
-    _useState8[1];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row ml-0 mr-0 w-100 mb-sm-5",
     style: {
@@ -73355,22 +73427,7 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       cursor: 'pointer',
       overflow: 'hidden'
     }
-  }, item.image != '' && /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
-    urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
-    publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
-    path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
-    style: {
-      width: sectionproperties.imageInnerWidth_Height + '%',
-      height: sectionproperties.imageInnerWidth_Height + '%',
-      objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
-      position: 'relative',
-      borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
-      borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
-      borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
-      borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px'
-    },
-    loading: "lazy"
-  })), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, Image('normal')), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "".concat(cardsstyles$4.wishlistbtn),
     onClick: function onClick() {
       addtofavoritescontext(item.productid);
@@ -73464,13 +73521,13 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       color: sectionproperties.quantitycolor,
       fontWeight: sectionproperties.quantityfontweight
     }
-  }, langdetect == 'en' ? sectionproperties.qtytextinen : sectionproperties.qtytextinar, " ", item.currentquantity)), sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, langdetect == 'en' ? sectionproperties.qtytextinen : sectionproperties.qtytextinar, ": ", item.currentquantity)), sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-12"
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     onClick: function onClick() {
       cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
     },
-    "class": "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak1 ',
+    "class": sectionproperties.wordbreak == '1' ? "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak1 ' : "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak2 ',
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
@@ -73482,16 +73539,17 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       color: sectionproperties.measurementunitcolor
     }
   }, item.measurmentunit), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 d-flex align-items-center"
+    "class": "col-lg-12 d-flex align-items-center flex-md-column justify-content-start"
   }, sectionproperties.prodPriceShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": "".concat(cardsstyles2.productPricestyles) + ' m-0 p-0 wordbreak ',
+    "class": "".concat(cardsstyles2.productPricestyles) + ' m-0 p-0 wordbreak w-md-100 ',
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
-  }, langdetect == 'en' ? item.currencyname : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname), item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": "".concat(cardsstyles2.productSalePricestyles) + ' linethrough mt-auto mb-0 p-0 wordbreak mr-1 ml-1  ',
+  }, langdetect == 'en' ? item.currencyname : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname), /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "".concat(cardsstyles2.productSalePricestyles) + ' linethrough mt-auto mb-0 p-0 wordbreak mr-1 ml-1 w-md-100 ml-md-0 mr-md-0 ',
     style: {
-      textAlign: langdetect == 'en' ? 'left' : 'right'
+      textAlign: langdetect == 'en' ? 'left' : 'right',
+      visibility: item.hassale == 1 ? 'visible' : 'hidden'
     }
   }, langdetect == 'en' ? item.currencyname : '', " ", item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname))), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "".concat(cardsstyles$4.card_informationcontainer)
@@ -73564,7 +73622,7 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     "class": "fa fa-chevron-up font-12"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "d-flex justify-content-start pl-2 pr-2",
+    "class": sectionproperties.total_fontsize != 0 ? 'd-flex justify-content-start pl-2 pr-2' : 'd-flex d-md-none justify-content-start pl-2 pr-2',
     style: {
       flex: 1
     }
@@ -80332,10 +80390,14 @@ var Simpleproductcard = function Simpleproductcard(props) {
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     sectionproperties = _useState2[0],
     setsectionproperties = _useState2[1];
-  var _useState3 = React.useState(props.cardinfoitemprops),
+  var _useState3 = React.useState(''),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0],
-    setitem = _useState4[1];
+    variantObj = _useState4[0],
+    setvariantObj = _useState4[1];
+  var _useState5 = React.useState(props.cardinfoitemprops),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    item = _useState6[0],
+    setitem = _useState6[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -80344,13 +80406,13 @@ var Simpleproductcard = function Simpleproductcard(props) {
   var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
   var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
   var ikimagecredcontext = props.actions.ikimagecredcontext;
-  props.actions.NotificationManager;
+  var NotificationManager = props.actions.NotificationManager;
   var AddtoCartContext = props.actions.AddtoCartContext;
   var AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
-  var _useState5 = React.useState(''),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    addtocardpayloadobj = _useState6[0];
-    _useState6[1];
+  var _useState7 = React.useState(''),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2);
+    _useState8[0];
+    _useState8[1];
   var plainString = function plainString(html) {
     var divContainer = document.createElement('div');
     divContainer.innerHTML = html;
@@ -80542,10 +80604,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
       transform: "translateX(0px)"
     })
   };
-  var _useState7 = React.useState(''),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2),
-    secondimage = _useState8[0],
-    setsecondimage = _useState8[1];
+  var _useState9 = React.useState(''),
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    secondimage = _useState10[0],
+    setsecondimage = _useState10[1];
   React.useEffect(function () {
     var _props$cardinfoitempr;
     setitem(props.cardinfoitemprops);
@@ -80573,13 +80635,44 @@ var Simpleproductcard = function Simpleproductcard(props) {
     }
   }, [props.cardinfoitemprops]);
   var addtocartfunc = function addtocartfunc() {
-    var tempaddtocardpayloadobj = _objectSpread$6({}, addtocardpayloadobj);
-    tempaddtocardpayloadobj.productid = item.productid;
-    tempaddtocardpayloadobj.functype = 'add';
-    tempaddtocardpayloadobj.item_type = 'product';
-    tempaddtocardpayloadobj.quantity = 1;
-    AddtoCartContext(tempaddtocardpayloadobj);
+    var addtocardpayloadobj = {
+      functype: 'add',
+      productid: item.productid,
+      variantid: '',
+      quantity: item.quantity,
+      vendorid: item.vendorid
+    };
+    var runfunc = false;
+    if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {
+      if (item.hasvariants == 1) {
+        // if (addtocardpayloadobj.variantid.length != 0) {
+        if (variantObj != undefined && variantObj != null && Object.keys(variantObj).length != 0) {
+          addtocardpayloadobj.variantid = variantObj.variantid;
+          runfunc = true;
+        } else {
+          NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Product Options' : 'من فضلك اختر متغير');
+        }
+      } else {
+        runfunc = true;
+      }
+    } else {
+      NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Quantity' : 'من فضلك اختر الكمية');
+    }
+    if (runfunc == true) {
+      AddtoCartContext(addtocardpayloadobj);
+    }
   };
+  // const addtocartfunc = () => {
+  //     var runfunc = false;
+
+  //     var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
+  //     tempaddtocardpayloadobj.productid = item.productid;
+  //     tempaddtocardpayloadobj.functype = 'add';
+  //     tempaddtocardpayloadobj.item_type = 'product';
+  //     tempaddtocardpayloadobj.quantity = 1;
+
+  //     AddtoCartContext(tempaddtocardpayloadobj);
+  // };
   var addtocartbuttonrender = function addtocartbuttonrender() {
     if (AddtoCartMutationContext.isLoading) {
       var _AddtoCartMutationCon;
@@ -80674,10 +80767,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
       }
     }));
   };
-  var _useState9 = React.useState(0),
-    _useState10 = _slicedToArray__default["default"](_useState9, 2),
-    clickCount = _useState10[0],
-    setClickCount = _useState10[1];
+  var _useState11 = React.useState(0),
+    _useState12 = _slicedToArray__default["default"](_useState11, 2),
+    clickCount = _useState12[0],
+    setClickCount = _useState12[1];
   var handleClick = function handleClick() {
     // Increase the click count by 1
     setClickCount(function (prevCount) {
@@ -81013,7 +81106,9 @@ var Simpleproductcard = function Simpleproductcard(props) {
       sectionproperties: sectionproperties,
       item: item
     },
-    foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {}
+    foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {
+      setvariantObj(variantCompletedObj);
+    }
   })), sectionproperties.showprofitcontainer == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-12 p-0",
     style: {
@@ -81058,7 +81153,9 @@ var Simpleproductcard = function Simpleproductcard(props) {
     // }}
     ,
     onClick: function onClick() {
-      if (sectionproperties.showvariantscont == 'Show') ; else {
+      if (sectionproperties.showvariantscont == 'Show') {
+        addtocartfunc();
+      } else {
         if (sectionproperties.automaticaddtocart == 'Yes' && item.hasvariants == 0) {
           addtocartfunc();
         } else if (sectionproperties.automaticaddtocart == 'Yes' && item.hasvariants == 1) {

package/dist/index.esm.js

@@ -72963,8 +72963,8 @@ var CardBadgeSlideFromTop = function CardBadgeSlideFromTop(props) {
   }, plainString(langdetect == 'en' ? item.description_en : item.description_ar))))));
 };
 
-var css_248z$c = ".Productccard_with_zoominonhover-module_productcard__8ASdR {\n\tposition: relative;\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\tposition: absolute;\n\ttop: 5px;\n\tright: 5px;\n\topacity: 0;\n\ttransition: .3s\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl {\n\tposition: relative;\n\tz-index: 1\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\topacity: 1;\n\tz-index: 8\n}\n.Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(10px);\n\ttransition: .3s;\n\ttransition-property: transform;\n\tdisplay: block\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(0)\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_product_details__3SLId {\n\tpadding-top: 10px ;\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t/* display: none; */\n\tpadding: 0 10px;\n\t/* width: 101% !important;\n\tleft: -1px; */\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK .Productccard_with_zoominonhover-module_price__12djA {\n\tdisplay: none\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\tdisplay: block;\n\tz-index: 1000 !important\n}\n@media screen and (max-width:800px) {\n\t.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t\tdisplay: block !important;\n\t\t/* border:none !important */\n\t}\n}";
-var cardsstyles$4 = {"productcard":"Productccard_with_zoominonhover-module_productcard__8ASdR","card_thumbnail":"Productccard_with_zoominonhover-module_card_thumbnail__xCWyB","wishlistbtn":"Productccard_with_zoominonhover-module_wishlistbtn__-9K6V","card_inner":"Productccard_with_zoominonhover-module_card_inner__-pVNl","product_details":"Productccard_with_zoominonhover-module_product_details__3SLId","card_informationcontainer":"Productccard_with_zoominonhover-module_card_informationcontainer__suyHK","price":"Productccard_with_zoominonhover-module_price__12djA"};
+var css_248z$c = ".Productccard_with_zoominonhover-module_productcard__8ASdR {\n\tposition: relative;\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\tposition: absolute;\n\ttop: 5px;\n\tright: 5px;\n\topacity: 0;\n\ttransition: .3s\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl {\n\tposition: relative;\n\tz-index: 1\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\topacity: 1;\n\tz-index: 8\n}\n.Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(10px);\n\ttransition: .3s;\n\ttransition-property: transform;\n\tdisplay: block\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(0)\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_product_details__3SLId {\n\tpadding-top: 10px ;\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t/* display: none; */\n\tpadding: 0 10px;\n\t/* width: 101% !important;\n\tleft: -1px; */\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK .Productccard_with_zoominonhover-module_price__12djA {\n\tdisplay: none\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\tdisplay: block;\n\tz-index: 1000 !important\n}\n@media screen and (max-width:800px) {\n\t.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t\tdisplay: block !important;\n\t\t/* border:none !important */\n\t}\n}\n.Productccard_with_zoominonhover-module_intialimage__8hcdc {\n    visibility: visible !important;\n    opacity: 1 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_secondaryimage__EHpKK {\n    visibility: hidden !important;\n\n    opacity: 0 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n\n.Productccard_with_zoominonhover-module_img_container__lSsmX:hover .Productccard_with_zoominonhover-module_intialimage__8hcdc {\n    visibility: hidden !important;\n\n    opacity: 0 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_img_container__lSsmX:hover .Productccard_with_zoominonhover-module_secondaryimage__EHpKK {\n    visibility: visible !important;\n\n    opacity: 1 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_img_container__lSsmX {\n    transition: all 0.4s !important;\n    position: relative !important;\n}";
+var cardsstyles$4 = {"productcard":"Productccard_with_zoominonhover-module_productcard__8ASdR","card_thumbnail":"Productccard_with_zoominonhover-module_card_thumbnail__xCWyB","wishlistbtn":"Productccard_with_zoominonhover-module_wishlistbtn__-9K6V","card_inner":"Productccard_with_zoominonhover-module_card_inner__-pVNl","product_details":"Productccard_with_zoominonhover-module_product_details__3SLId","card_informationcontainer":"Productccard_with_zoominonhover-module_card_informationcontainer__suyHK","price":"Productccard_with_zoominonhover-module_price__12djA","intialimage":"Productccard_with_zoominonhover-module_intialimage__8hcdc","secondaryimage":"Productccard_with_zoominonhover-module_secondaryimage__EHpKK","img_container":"Productccard_with_zoominonhover-module_img_container__lSsmX"};
 styleInject(css_248z$c);
 
 function ownKeys$w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -72991,20 +72991,24 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
   var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
   var NotificationManager = props.actions.NotificationManager;
   var ikimagecredcontext = props.actions.ikimagecredcontext;
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2);
-    _useState6[0];
-    _useState6[1];
   useEffect(function () {
-    var secpropobj = {};
-    StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
-      if (sectionitem.sectionid == props.sectionidprops) {
-        sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
-          secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
-        });
-      }
-    });
-    setsectionproperties(_objectSpread$w({}, secpropobj));
+    if (props.srcfrom == 'addsectionform') {
+      var secpropobj = {};
+      props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
+        secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
+      });
+      setsectionproperties(_objectSpread$w({}, secpropobj));
+    } else {
+      var secpropobj = {};
+      StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+        if (sectionitem.sectionid == props.sectionidprops) {
+          sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+            secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+          });
+        }
+      });
+      setsectionproperties(_objectSpread$w({}, secpropobj));
+    }
   }, [StatePagePropertiesContext]);
   useEffect(function () {
     setitem(props.cardinfoitemprops);
@@ -73012,6 +73016,8 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
   var updatequantity = function updatequantity(type) {
     var tempitem = _objectSpread$w({}, item);
     tempitem.quantity = 0;
+    setitem(_objectSpread$w({}, tempitem));
+    tempitem.quantity = parseInt(tempitem.quantity);
     if (type == 'add') {
       tempitem.quantity = tempitem.quantity + 1;
     } else if (type == 'remove') {
@@ -73048,6 +73054,74 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       AddtoCartContext(addtocardpayloadobj);
     }
   };
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    secondimage = _useState6[0],
+    setsecondimage = _useState6[1];
+  useEffect(function () {
+    var _props$cardinfoitempr;
+    setitem(props.cardinfoitemprops);
+    if ((props === null || props === void 0 || (_props$cardinfoitempr = props.cardinfoitemprops) === null || _props$cardinfoitempr === void 0 || (_props$cardinfoitempr = _props$cardinfoitempr.productimages) === null || _props$cardinfoitempr === void 0 ? void 0 : _props$cardinfoitempr.length) == 1) {
+      var _props$cardinfoitempr2;
+      setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr2 = props.cardinfoitemprops) === null || _props$cardinfoitempr2 === void 0 ? void 0 : _props$cardinfoitempr2.image);
+    } else {
+      var _props$cardinfoitempr3, _props$cardinfoitempr4;
+      if ((props === null || props === void 0 ? void 0 : props.cardinfoitemprops) != undefined && (props === null || props === void 0 || (_props$cardinfoitempr3 = props.cardinfoitemprops) === null || _props$cardinfoitempr3 === void 0 ? void 0 : _props$cardinfoitempr3.productimages) != undefined && Array.isArray(props === null || props === void 0 || (_props$cardinfoitempr4 = props.cardinfoitemprops) === null || _props$cardinfoitempr4 === void 0 ? void 0 : _props$cardinfoitempr4.productimages)) {
+        var _props$cardinfoitempr5, _props$cardinfoitempr6, _props$cardinfoitempr7;
+        if ((props === null || props === void 0 || (_props$cardinfoitempr5 = props.cardinfoitemprops) === null || _props$cardinfoitempr5 === void 0 ? void 0 : _props$cardinfoitempr5.productimages[0]) != undefined && (props === null || props === void 0 || (_props$cardinfoitempr6 = props.cardinfoitemprops) === null || _props$cardinfoitempr6 === void 0 || (_props$cardinfoitempr6 = _props$cardinfoitempr6.productimages[0]) === null || _props$cardinfoitempr6 === void 0 ? void 0 : _props$cardinfoitempr6.path) == (props === null || props === void 0 || (_props$cardinfoitempr7 = props.cardinfoitemprops) === null || _props$cardinfoitempr7 === void 0 ? void 0 : _props$cardinfoitempr7.image)) {
+          var _props$cardinfoitempr8;
+          if ((props === null || props === void 0 || (_props$cardinfoitempr8 = props.cardinfoitemprops) === null || _props$cardinfoitempr8 === void 0 || (_props$cardinfoitempr8 = _props$cardinfoitempr8.productimages[1]) === null || _props$cardinfoitempr8 === void 0 ? void 0 : _props$cardinfoitempr8.length) != 0) {
+            var _props$cardinfoitempr9;
+            setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr9 = props.cardinfoitemprops) === null || _props$cardinfoitempr9 === void 0 || (_props$cardinfoitempr9 = _props$cardinfoitempr9.productimages[1]) === null || _props$cardinfoitempr9 === void 0 ? void 0 : _props$cardinfoitempr9.path);
+          } else {
+            var _props$cardinfoitempr10;
+            setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr10 = props.cardinfoitemprops) === null || _props$cardinfoitempr10 === void 0 ? void 0 : _props$cardinfoitempr10.image);
+          }
+        } else {
+          var _props$cardinfoitempr11;
+          setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr11 = props.cardinfoitemprops) === null || _props$cardinfoitempr11 === void 0 || (_props$cardinfoitempr11 = _props$cardinfoitempr11.productimages[0]) === null || _props$cardinfoitempr11 === void 0 ? void 0 : _props$cardinfoitempr11.path);
+        }
+      }
+    }
+  }, [props.cardinfoitemprops]);
+  var Image = function Image(type) {
+    var transition = false;
+    if (sectionproperties.hideshowcardtransition == 'Show' && type != 'responsive') {
+      transition = true;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      "class": "w-100 cursor-pointer h-100",
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(Imagekitimagecomp, {
+      "class": transition ? cardsstyles$4.intialimage : '',
+      urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+      publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+      path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
+      loading: "lazy",
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain'
+      }
+    }), transition && /*#__PURE__*/React.createElement(Imagekitimagecomp, {
+      "class": cardsstyles$4.secondaryimage,
+      urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+      publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+      path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + secondimage,
+      loading: "lazy",
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain'
+      }
+    }));
+  };
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2);
+    _useState8[0];
+    _useState8[1];
   var cardsstyles2 = {
     productcard: css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -73127,8 +73201,7 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       transition: '.3s',
       ':hover': {
         background: sectionproperties.cartbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColoronhover,
-        color: sectionproperties.cartBtnTextcoloronhover,
-        borderColor: sectionproperties.cartBtnTextcoloronhover
+        color: sectionproperties.cartBtnTextcoloronhover
       }
     }),
     img_container: css({
@@ -73160,7 +73233,10 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       position: 'relative',
       fontWeight: sectionproperties.quantitybtn_textfontweight,
       color: sectionproperties.quantitybtn_textcolor,
-      fontSize: sectionproperties.quantitybtn_textfontsize + 'px'
+      fontSize: sectionproperties.quantitybtn_textfontsize + 'px',
+      '@media (max-width: 800px)': {
+        width: '100%'
+      }
     }),
     quantitybtn_text: css({
       margin: 'auto'
@@ -73275,10 +73351,6 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       })), langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic);
     }
   };
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2);
-    _useState8[0];
-    _useState8[1];
   return /*#__PURE__*/React.createElement("div", {
     "class": "row ml-0 mr-0 w-100 mb-sm-5",
     style: {
@@ -73306,22 +73378,7 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       cursor: 'pointer',
       overflow: 'hidden'
     }
-  }, item.image != '' && /*#__PURE__*/React.createElement(Imagekitimagecomp, {
-    urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
-    publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
-    path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
-    style: {
-      width: sectionproperties.imageInnerWidth_Height + '%',
-      height: sectionproperties.imageInnerWidth_Height + '%',
-      objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
-      position: 'relative',
-      borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
-      borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
-      borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
-      borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px'
-    },
-    loading: "lazy"
-  })), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React.createElement("div", {
+  }, Image('normal')), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React.createElement("div", {
     "class": "".concat(cardsstyles$4.wishlistbtn),
     onClick: function onClick() {
       addtofavoritescontext(item.productid);
@@ -73415,13 +73472,13 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       color: sectionproperties.quantitycolor,
       fontWeight: sectionproperties.quantityfontweight
     }
-  }, langdetect == 'en' ? sectionproperties.qtytextinen : sectionproperties.qtytextinar, " ", item.currentquantity)), sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React.createElement("div", {
+  }, langdetect == 'en' ? sectionproperties.qtytextinen : sectionproperties.qtytextinar, ": ", item.currentquantity)), sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12"
   }, /*#__PURE__*/React.createElement("p", {
     onClick: function onClick() {
       cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
     },
-    "class": "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak1 ',
+    "class": sectionproperties.wordbreak == '1' ? "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak1 ' : "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak2 ',
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
@@ -73433,16 +73490,17 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       color: sectionproperties.measurementunitcolor
     }
   }, item.measurmentunit), /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 d-flex align-items-center"
+    "class": "col-lg-12 d-flex align-items-center flex-md-column justify-content-start"
   }, sectionproperties.prodPriceShow == 'Show' && /*#__PURE__*/React.createElement("p", {
-    "class": "".concat(cardsstyles2.productPricestyles) + ' m-0 p-0 wordbreak ',
+    "class": "".concat(cardsstyles2.productPricestyles) + ' m-0 p-0 wordbreak w-md-100 ',
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
-  }, langdetect == 'en' ? item.currencyname : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname), item.hassale == 1 && /*#__PURE__*/React.createElement("p", {
-    "class": "".concat(cardsstyles2.productSalePricestyles) + ' linethrough mt-auto mb-0 p-0 wordbreak mr-1 ml-1  ',
+  }, langdetect == 'en' ? item.currencyname : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname), /*#__PURE__*/React.createElement("p", {
+    "class": "".concat(cardsstyles2.productSalePricestyles) + ' linethrough mt-auto mb-0 p-0 wordbreak mr-1 ml-1 w-md-100 ml-md-0 mr-md-0 ',
     style: {
-      textAlign: langdetect == 'en' ? 'left' : 'right'
+      textAlign: langdetect == 'en' ? 'left' : 'right',
+      visibility: item.hassale == 1 ? 'visible' : 'hidden'
     }
   }, langdetect == 'en' ? item.currencyname : '', " ", item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname))), /*#__PURE__*/React.createElement("div", {
     "class": "".concat(cardsstyles$4.card_informationcontainer)
@@ -73515,7 +73573,7 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
   }, /*#__PURE__*/React.createElement("i", {
     "class": "fa fa-chevron-up font-12"
   }))), /*#__PURE__*/React.createElement("div", {
-    "class": "d-flex justify-content-start pl-2 pr-2",
+    "class": sectionproperties.total_fontsize != 0 ? 'd-flex justify-content-start pl-2 pr-2' : 'd-flex d-md-none justify-content-start pl-2 pr-2',
     style: {
       flex: 1
     }
@@ -80283,10 +80341,14 @@ var Simpleproductcard = function Simpleproductcard(props) {
     _useState2 = _slicedToArray(_useState, 2),
     sectionproperties = _useState2[0],
     setsectionproperties = _useState2[1];
-  var _useState3 = useState(props.cardinfoitemprops),
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    item = _useState4[0],
-    setitem = _useState4[1];
+    variantObj = _useState4[0],
+    setvariantObj = _useState4[1];
+  var _useState5 = useState(props.cardinfoitemprops),
+    _useState6 = _slicedToArray(_useState5, 2),
+    item = _useState6[0],
+    setitem = _useState6[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -80295,13 +80357,13 @@ var Simpleproductcard = function Simpleproductcard(props) {
   var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
   var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
   var ikimagecredcontext = props.actions.ikimagecredcontext;
-  props.actions.NotificationManager;
+  var NotificationManager = props.actions.NotificationManager;
   var AddtoCartContext = props.actions.AddtoCartContext;
   var AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    addtocardpayloadobj = _useState6[0];
-    _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2);
+    _useState8[0];
+    _useState8[1];
   var plainString = function plainString(html) {
     var divContainer = document.createElement('div');
     divContainer.innerHTML = html;
@@ -80493,10 +80555,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
       transform: "translateX(0px)"
     })
   };
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    secondimage = _useState8[0],
-    setsecondimage = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    secondimage = _useState10[0],
+    setsecondimage = _useState10[1];
   useEffect(function () {
     var _props$cardinfoitempr;
     setitem(props.cardinfoitemprops);
@@ -80524,13 +80586,44 @@ var Simpleproductcard = function Simpleproductcard(props) {
     }
   }, [props.cardinfoitemprops]);
   var addtocartfunc = function addtocartfunc() {
-    var tempaddtocardpayloadobj = _objectSpread$6({}, addtocardpayloadobj);
-    tempaddtocardpayloadobj.productid = item.productid;
-    tempaddtocardpayloadobj.functype = 'add';
-    tempaddtocardpayloadobj.item_type = 'product';
-    tempaddtocardpayloadobj.quantity = 1;
-    AddtoCartContext(tempaddtocardpayloadobj);
+    var addtocardpayloadobj = {
+      functype: 'add',
+      productid: item.productid,
+      variantid: '',
+      quantity: item.quantity,
+      vendorid: item.vendorid
+    };
+    var runfunc = false;
+    if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {
+      if (item.hasvariants == 1) {
+        // if (addtocardpayloadobj.variantid.length != 0) {
+        if (variantObj != undefined && variantObj != null && Object.keys(variantObj).length != 0) {
+          addtocardpayloadobj.variantid = variantObj.variantid;
+          runfunc = true;
+        } else {
+          NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Product Options' : 'من فضلك اختر متغير');
+        }
+      } else {
+        runfunc = true;
+      }
+    } else {
+      NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Quantity' : 'من فضلك اختر الكمية');
+    }
+    if (runfunc == true) {
+      AddtoCartContext(addtocardpayloadobj);
+    }
   };
+  // const addtocartfunc = () => {
+  //     var runfunc = false;
+
+  //     var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
+  //     tempaddtocardpayloadobj.productid = item.productid;
+  //     tempaddtocardpayloadobj.functype = 'add';
+  //     tempaddtocardpayloadobj.item_type = 'product';
+  //     tempaddtocardpayloadobj.quantity = 1;
+
+  //     AddtoCartContext(tempaddtocardpayloadobj);
+  // };
   var addtocartbuttonrender = function addtocartbuttonrender() {
     if (AddtoCartMutationContext.isLoading) {
       var _AddtoCartMutationCon;
@@ -80625,10 +80718,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
       }
     }));
   };
-  var _useState9 = useState(0),
-    _useState10 = _slicedToArray(_useState9, 2),
-    clickCount = _useState10[0],
-    setClickCount = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    clickCount = _useState12[0],
+    setClickCount = _useState12[1];
   var handleClick = function handleClick() {
     // Increase the click count by 1
     setClickCount(function (prevCount) {
@@ -80964,7 +81057,9 @@ var Simpleproductcard = function Simpleproductcard(props) {
       sectionproperties: sectionproperties,
       item: item
     },
-    foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {}
+    foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {
+      setvariantObj(variantCompletedObj);
+    }
   })), sectionproperties.showprofitcontainer == 'Show' && /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12 p-0",
     style: {
@@ -81009,7 +81104,9 @@ var Simpleproductcard = function Simpleproductcard(props) {
     // }}
     ,
     onClick: function onClick() {
-      if (sectionproperties.showvariantscont == 'Show') ; else {
+      if (sectionproperties.showvariantscont == 'Show') {
+        addtocartfunc();
+      } else {
         if (sectionproperties.automaticaddtocart == 'Yes' && item.hasvariants == 0) {
           addtocartfunc();
         } else if (sectionproperties.automaticaddtocart == 'Yes' && item.hasvariants == 1) {

package/dist/index.umd.js

@@ -72829,8 +72829,8 @@
       }, plainString(langdetect == 'en' ? item.description_en : item.description_ar))))));
     };
 
-    var css_248z$c = ".Productccard_with_zoominonhover-module_productcard__8ASdR {\n\tposition: relative;\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\tposition: absolute;\n\ttop: 5px;\n\tright: 5px;\n\topacity: 0;\n\ttransition: .3s\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl {\n\tposition: relative;\n\tz-index: 1\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\topacity: 1;\n\tz-index: 8\n}\n.Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(10px);\n\ttransition: .3s;\n\ttransition-property: transform;\n\tdisplay: block\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(0)\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_product_details__3SLId {\n\tpadding-top: 10px ;\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t/* display: none; */\n\tpadding: 0 10px;\n\t/* width: 101% !important;\n\tleft: -1px; */\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK .Productccard_with_zoominonhover-module_price__12djA {\n\tdisplay: none\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\tdisplay: block;\n\tz-index: 1000 !important\n}\n@media screen and (max-width:800px) {\n\t.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t\tdisplay: block !important;\n\t\t/* border:none !important */\n\t}\n}";
-    var cardsstyles$4 = {"productcard":"Productccard_with_zoominonhover-module_productcard__8ASdR","card_thumbnail":"Productccard_with_zoominonhover-module_card_thumbnail__xCWyB","wishlistbtn":"Productccard_with_zoominonhover-module_wishlistbtn__-9K6V","card_inner":"Productccard_with_zoominonhover-module_card_inner__-pVNl","product_details":"Productccard_with_zoominonhover-module_product_details__3SLId","card_informationcontainer":"Productccard_with_zoominonhover-module_card_informationcontainer__suyHK","price":"Productccard_with_zoominonhover-module_price__12djA"};
+    var css_248z$c = ".Productccard_with_zoominonhover-module_productcard__8ASdR {\n\tposition: relative;\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\tposition: absolute;\n\ttop: 5px;\n\tright: 5px;\n\topacity: 0;\n\ttransition: .3s\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl {\n\tposition: relative;\n\tz-index: 1\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_thumbnail__xCWyB .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V {\n\topacity: 1;\n\tz-index: 8\n}\n.Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(10px);\n\ttransition: .3s;\n\ttransition-property: transform;\n\tdisplay: block\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_wishlistbtn__-9K6V  {\n\ttransform: translateX(0)\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_product_details__3SLId {\n\tpadding-top: 10px ;\n\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t/* display: none; */\n\tpadding: 0 10px;\n\t/* width: 101% !important;\n\tleft: -1px; */\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK .Productccard_with_zoominonhover-module_price__12djA {\n\tdisplay: none\n}\n.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_inner__-pVNl:hover .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\tdisplay: block;\n\tz-index: 1000 !important\n}\n@media screen and (max-width:800px) {\n\t.Productccard_with_zoominonhover-module_productcard__8ASdR .Productccard_with_zoominonhover-module_card_informationcontainer__suyHK {\n\t\tdisplay: block !important;\n\t\t/* border:none !important */\n\t}\n}\n.Productccard_with_zoominonhover-module_intialimage__8hcdc {\n    visibility: visible !important;\n    opacity: 1 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_secondaryimage__EHpKK {\n    visibility: hidden !important;\n\n    opacity: 0 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n\n.Productccard_with_zoominonhover-module_img_container__lSsmX:hover .Productccard_with_zoominonhover-module_intialimage__8hcdc {\n    visibility: hidden !important;\n\n    opacity: 0 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_img_container__lSsmX:hover .Productccard_with_zoominonhover-module_secondaryimage__EHpKK {\n    visibility: visible !important;\n\n    opacity: 1 !important;\n    transition: visibility 0.4s, opacity 0.4s linear !important;\n\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n}\n.Productccard_with_zoominonhover-module_img_container__lSsmX {\n    transition: all 0.4s !important;\n    position: relative !important;\n}";
+    var cardsstyles$4 = {"productcard":"Productccard_with_zoominonhover-module_productcard__8ASdR","card_thumbnail":"Productccard_with_zoominonhover-module_card_thumbnail__xCWyB","wishlistbtn":"Productccard_with_zoominonhover-module_wishlistbtn__-9K6V","card_inner":"Productccard_with_zoominonhover-module_card_inner__-pVNl","product_details":"Productccard_with_zoominonhover-module_product_details__3SLId","card_informationcontainer":"Productccard_with_zoominonhover-module_card_informationcontainer__suyHK","price":"Productccard_with_zoominonhover-module_price__12djA","intialimage":"Productccard_with_zoominonhover-module_intialimage__8hcdc","secondaryimage":"Productccard_with_zoominonhover-module_secondaryimage__EHpKK","img_container":"Productccard_with_zoominonhover-module_img_container__lSsmX"};
     styleInject(css_248z$c);
 
     function ownKeys$w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -72857,27 +72857,31 @@
       var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
       var NotificationManager = props.actions.NotificationManager;
       var ikimagecredcontext = props.actions.ikimagecredcontext;
-      var _useState5 = React.useState(''),
-        _useState6 = _slicedToArray__default["default"](_useState5, 2);
-        _useState6[0];
-        _useState6[1];
       React.useEffect(function () {
-        var secpropobj = {};
-        StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
-          if (sectionitem.sectionid == props.sectionidprops) {
-            sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
-              secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
-            });
-          }
-        });
-        setsectionproperties(_objectSpread$w({}, secpropobj));
+        if (props.srcfrom == 'addsectionform') {
+          var secpropobj = {};
+          props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
+            secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
+          });
+          setsectionproperties(_objectSpread$w({}, secpropobj));
+        } else {
+          var secpropobj = {};
+          StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+            if (sectionitem.sectionid == props.sectionidprops) {
+              sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+                secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+              });
+            }
+          });
+          setsectionproperties(_objectSpread$w({}, secpropobj));
+        }
       }, [StatePagePropertiesContext]);
       React.useEffect(function () {
         setitem(props.cardinfoitemprops);
       }, [props.cardinfoitemprops]);
       var updatequantity = function updatequantity(type) {
         var tempitem = _objectSpread$w({}, item);
-        tempitem.quantity = 0;
+        tempitem.quantity = parseInt(tempitem.quantity);
         if (type == 'add') {
           tempitem.quantity = tempitem.quantity + 1;
         } else if (type == 'remove') {
@@ -72914,6 +72918,74 @@
           AddtoCartContext(addtocardpayloadobj);
         }
       };
+      var _useState5 = React.useState(''),
+        _useState6 = _slicedToArray__default["default"](_useState5, 2),
+        secondimage = _useState6[0],
+        setsecondimage = _useState6[1];
+      React.useEffect(function () {
+        var _props$cardinfoitempr;
+        setitem(props.cardinfoitemprops);
+        if ((props === null || props === void 0 || (_props$cardinfoitempr = props.cardinfoitemprops) === null || _props$cardinfoitempr === void 0 || (_props$cardinfoitempr = _props$cardinfoitempr.productimages) === null || _props$cardinfoitempr === void 0 ? void 0 : _props$cardinfoitempr.length) == 1) {
+          var _props$cardinfoitempr2;
+          setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr2 = props.cardinfoitemprops) === null || _props$cardinfoitempr2 === void 0 ? void 0 : _props$cardinfoitempr2.image);
+        } else {
+          var _props$cardinfoitempr3, _props$cardinfoitempr4;
+          if ((props === null || props === void 0 ? void 0 : props.cardinfoitemprops) != undefined && (props === null || props === void 0 || (_props$cardinfoitempr3 = props.cardinfoitemprops) === null || _props$cardinfoitempr3 === void 0 ? void 0 : _props$cardinfoitempr3.productimages) != undefined && Array.isArray(props === null || props === void 0 || (_props$cardinfoitempr4 = props.cardinfoitemprops) === null || _props$cardinfoitempr4 === void 0 ? void 0 : _props$cardinfoitempr4.productimages)) {
+            var _props$cardinfoitempr5, _props$cardinfoitempr6, _props$cardinfoitempr7;
+            if ((props === null || props === void 0 || (_props$cardinfoitempr5 = props.cardinfoitemprops) === null || _props$cardinfoitempr5 === void 0 ? void 0 : _props$cardinfoitempr5.productimages[0]) != undefined && (props === null || props === void 0 || (_props$cardinfoitempr6 = props.cardinfoitemprops) === null || _props$cardinfoitempr6 === void 0 || (_props$cardinfoitempr6 = _props$cardinfoitempr6.productimages[0]) === null || _props$cardinfoitempr6 === void 0 ? void 0 : _props$cardinfoitempr6.path) == (props === null || props === void 0 || (_props$cardinfoitempr7 = props.cardinfoitemprops) === null || _props$cardinfoitempr7 === void 0 ? void 0 : _props$cardinfoitempr7.image)) {
+              var _props$cardinfoitempr8;
+              if ((props === null || props === void 0 || (_props$cardinfoitempr8 = props.cardinfoitemprops) === null || _props$cardinfoitempr8 === void 0 || (_props$cardinfoitempr8 = _props$cardinfoitempr8.productimages[1]) === null || _props$cardinfoitempr8 === void 0 ? void 0 : _props$cardinfoitempr8.length) != 0) {
+                var _props$cardinfoitempr9;
+                setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr9 = props.cardinfoitemprops) === null || _props$cardinfoitempr9 === void 0 || (_props$cardinfoitempr9 = _props$cardinfoitempr9.productimages[1]) === null || _props$cardinfoitempr9 === void 0 ? void 0 : _props$cardinfoitempr9.path);
+              } else {
+                var _props$cardinfoitempr10;
+                setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr10 = props.cardinfoitemprops) === null || _props$cardinfoitempr10 === void 0 ? void 0 : _props$cardinfoitempr10.image);
+              }
+            } else {
+              var _props$cardinfoitempr11;
+              setsecondimage(props === null || props === void 0 || (_props$cardinfoitempr11 = props.cardinfoitemprops) === null || _props$cardinfoitempr11 === void 0 || (_props$cardinfoitempr11 = _props$cardinfoitempr11.productimages[0]) === null || _props$cardinfoitempr11 === void 0 ? void 0 : _props$cardinfoitempr11.path);
+            }
+          }
+        }
+      }, [props.cardinfoitemprops]);
+      var Image = function Image(type) {
+        var transition = false;
+        if (sectionproperties.hideshowcardtransition == 'Show' && type != 'responsive') {
+          transition = true;
+        }
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "w-100 cursor-pointer h-100",
+          style: {
+            position: 'relative'
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
+          "class": transition ? cardsstyles$4.intialimage : '',
+          urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+          publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+          path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
+          loading: "lazy",
+          style: {
+            width: '100%',
+            height: '100%',
+            objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain'
+          }
+        }), transition && /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
+          "class": cardsstyles$4.secondaryimage,
+          urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+          publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+          path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + secondimage,
+          loading: "lazy",
+          style: {
+            width: '100%',
+            height: '100%',
+            objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain'
+          }
+        }));
+      };
+      var _useState7 = React.useState(0),
+        _useState8 = _slicedToArray__default["default"](_useState7, 2);
+        _useState8[0];
+        _useState8[1];
       var cardsstyles2 = {
         productcard: glamor.css({
           background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -72993,8 +73065,7 @@
           transition: '.3s',
           ':hover': {
             background: sectionproperties.cartbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColoronhover,
-            color: sectionproperties.cartBtnTextcoloronhover,
-            borderColor: sectionproperties.cartBtnTextcoloronhover
+            color: sectionproperties.cartBtnTextcoloronhover
           }
         }),
         img_container: glamor.css({
@@ -73026,7 +73097,10 @@
           position: 'relative',
           fontWeight: sectionproperties.quantitybtn_textfontweight,
           color: sectionproperties.quantitybtn_textcolor,
-          fontSize: sectionproperties.quantitybtn_textfontsize + 'px'
+          fontSize: sectionproperties.quantitybtn_textfontsize + 'px',
+          '@media (max-width: 800px)': {
+            width: '100%'
+          }
         }),
         quantitybtn_text: glamor.css({
           margin: 'auto'
@@ -73141,10 +73215,6 @@
           })), langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic);
         }
       };
-      var _useState7 = React.useState(0),
-        _useState8 = _slicedToArray__default["default"](_useState7, 2);
-        _useState8[0];
-        _useState8[1];
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "row ml-0 mr-0 w-100 mb-sm-5",
         style: {
@@ -73172,22 +73242,7 @@
           cursor: 'pointer',
           overflow: 'hidden'
         }
-      }, item.image != '' && /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
-        urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
-        publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
-        path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
-        style: {
-          width: sectionproperties.imageInnerWidth_Height + '%',
-          height: sectionproperties.imageInnerWidth_Height + '%',
-          objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
-          position: 'relative',
-          borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
-          borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
-          borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
-          borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px'
-        },
-        loading: "lazy"
-      })), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, Image('normal')), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "".concat(cardsstyles$4.wishlistbtn),
         onClick: function onClick() {
           addtofavoritescontext(item.productid);
@@ -73281,13 +73336,13 @@
           color: sectionproperties.quantitycolor,
           fontWeight: sectionproperties.quantityfontweight
         }
-      }, langdetect == 'en' ? sectionproperties.qtytextinen : sectionproperties.qtytextinar, " ", item.currentquantity)), sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, langdetect == 'en' ? sectionproperties.qtytextinen : sectionproperties.qtytextinar, ": ", item.currentquantity)), sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12"
       }, /*#__PURE__*/React__default["default"].createElement("p", {
         onClick: function onClick() {
           cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
         },
-        "class": "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak1 ',
+        "class": sectionproperties.wordbreak == '1' ? "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak1 ' : "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak2 ',
         style: {
           textAlign: langdetect == 'en' ? 'left' : 'right'
         }
@@ -73299,16 +73354,17 @@
           color: sectionproperties.measurementunitcolor
         }
       }, item.measurmentunit), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 d-flex align-items-center"
+        "class": "col-lg-12 d-flex align-items-center flex-md-column justify-content-start"
       }, sectionproperties.prodPriceShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "".concat(cardsstyles2.productPricestyles) + ' m-0 p-0 wordbreak ',
+        "class": "".concat(cardsstyles2.productPricestyles) + ' m-0 p-0 wordbreak w-md-100 ',
         style: {
           textAlign: langdetect == 'en' ? 'left' : 'right'
         }
-      }, langdetect == 'en' ? item.currencyname : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname), item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "".concat(cardsstyles2.productSalePricestyles) + ' linethrough mt-auto mb-0 p-0 wordbreak mr-1 ml-1  ',
+      }, langdetect == 'en' ? item.currencyname : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname), /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "".concat(cardsstyles2.productSalePricestyles) + ' linethrough mt-auto mb-0 p-0 wordbreak mr-1 ml-1 w-md-100 ml-md-0 mr-md-0 ',
         style: {
-          textAlign: langdetect == 'en' ? 'left' : 'right'
+          textAlign: langdetect == 'en' ? 'left' : 'right',
+          visibility: item.hassale == 1 ? 'visible' : 'hidden'
         }
       }, langdetect == 'en' ? item.currencyname : '', " ", item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname))), /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "".concat(cardsstyles$4.card_informationcontainer)
@@ -73381,7 +73437,7 @@
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         "class": "fa fa-chevron-up font-12"
       }))), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "d-flex justify-content-start pl-2 pr-2",
+        "class": sectionproperties.total_fontsize != 0 ? 'd-flex justify-content-start pl-2 pr-2' : 'd-flex d-md-none justify-content-start pl-2 pr-2',
         style: {
           flex: 1
         }
@@ -80149,10 +80205,14 @@
         _useState2 = _slicedToArray__default["default"](_useState, 2),
         sectionproperties = _useState2[0],
         setsectionproperties = _useState2[1];
-      var _useState3 = React.useState(props.cardinfoitemprops),
+      var _useState3 = React.useState(''),
         _useState4 = _slicedToArray__default["default"](_useState3, 2),
-        item = _useState4[0],
-        setitem = _useState4[1];
+        variantObj = _useState4[0],
+        setvariantObj = _useState4[1];
+      var _useState5 = React.useState(props.cardinfoitemprops),
+        _useState6 = _slicedToArray__default["default"](_useState5, 2),
+        item = _useState6[0],
+        setitem = _useState6[1];
       var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
       props.actions.lang;
       var langdetect = props.actions.langdetect;
@@ -80161,13 +80221,13 @@
       var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
       var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
       var ikimagecredcontext = props.actions.ikimagecredcontext;
-      props.actions.NotificationManager;
+      var NotificationManager = props.actions.NotificationManager;
       var AddtoCartContext = props.actions.AddtoCartContext;
       var AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
-      var _useState5 = React.useState(''),
-        _useState6 = _slicedToArray__default["default"](_useState5, 2),
-        addtocardpayloadobj = _useState6[0];
-        _useState6[1];
+      var _useState7 = React.useState(''),
+        _useState8 = _slicedToArray__default["default"](_useState7, 2);
+        _useState8[0];
+        _useState8[1];
       var plainString = function plainString(html) {
         var divContainer = document.createElement('div');
         divContainer.innerHTML = html;
@@ -80359,10 +80419,10 @@
           transform: "translateX(0px)"
         })
       };
-      var _useState7 = React.useState(''),
-        _useState8 = _slicedToArray__default["default"](_useState7, 2),
-        secondimage = _useState8[0],
-        setsecondimage = _useState8[1];
+      var _useState9 = React.useState(''),
+        _useState10 = _slicedToArray__default["default"](_useState9, 2),
+        secondimage = _useState10[0],
+        setsecondimage = _useState10[1];
       React.useEffect(function () {
         var _props$cardinfoitempr;
         setitem(props.cardinfoitemprops);
@@ -80390,13 +80450,44 @@
         }
       }, [props.cardinfoitemprops]);
       var addtocartfunc = function addtocartfunc() {
-        var tempaddtocardpayloadobj = _objectSpread$6({}, addtocardpayloadobj);
-        tempaddtocardpayloadobj.productid = item.productid;
-        tempaddtocardpayloadobj.functype = 'add';
-        tempaddtocardpayloadobj.item_type = 'product';
-        tempaddtocardpayloadobj.quantity = 1;
-        AddtoCartContext(tempaddtocardpayloadobj);
+        var addtocardpayloadobj = {
+          functype: 'add',
+          productid: item.productid,
+          variantid: '',
+          quantity: item.quantity,
+          vendorid: item.vendorid
+        };
+        var runfunc = false;
+        if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {
+          if (item.hasvariants == 1) {
+            // if (addtocardpayloadobj.variantid.length != 0) {
+            if (variantObj != undefined && variantObj != null && Object.keys(variantObj).length != 0) {
+              addtocardpayloadobj.variantid = variantObj.variantid;
+              runfunc = true;
+            } else {
+              NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Product Options' : 'من فضلك اختر متغير');
+            }
+          } else {
+            runfunc = true;
+          }
+        } else {
+          NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Quantity' : 'من فضلك اختر الكمية');
+        }
+        if (runfunc == true) {
+          AddtoCartContext(addtocardpayloadobj);
+        }
       };
+      // const addtocartfunc = () => {
+      //     var runfunc = false;
+
+      //     var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
+      //     tempaddtocardpayloadobj.productid = item.productid;
+      //     tempaddtocardpayloadobj.functype = 'add';
+      //     tempaddtocardpayloadobj.item_type = 'product';
+      //     tempaddtocardpayloadobj.quantity = 1;
+
+      //     AddtoCartContext(tempaddtocardpayloadobj);
+      // };
       var addtocartbuttonrender = function addtocartbuttonrender() {
         if (AddtoCartMutationContext.isLoading) {
           var _AddtoCartMutationCon;
@@ -80491,10 +80582,10 @@
           }
         }));
       };
-      var _useState9 = React.useState(0),
-        _useState10 = _slicedToArray__default["default"](_useState9, 2),
-        clickCount = _useState10[0],
-        setClickCount = _useState10[1];
+      var _useState11 = React.useState(0),
+        _useState12 = _slicedToArray__default["default"](_useState11, 2),
+        clickCount = _useState12[0],
+        setClickCount = _useState12[1];
       var handleClick = function handleClick() {
         // Increase the click count by 1
         setClickCount(function (prevCount) {
@@ -80830,7 +80921,9 @@
           sectionproperties: sectionproperties,
           item: item
         },
-        foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {}
+        foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {
+          setvariantObj(variantCompletedObj);
+        }
       })), sectionproperties.showprofitcontainer == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12 p-0",
         style: {
@@ -80875,7 +80968,9 @@
         // }}
         ,
         onClick: function onClick() {
-          if (sectionproperties.showvariantscont == 'Show') ; else {
+          if (sectionproperties.showvariantscont == 'Show') {
+            addtocartfunc();
+          } else {
             if (sectionproperties.automaticaddtocart == 'Yes' && item.hasvariants == 0) {
               addtocartfunc();
             } else if (sectionproperties.automaticaddtocart == 'Yes' && item.hasvariants == 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabexseriescomponents",
-    "version": "0.0.775",
+    "version": "0.0.777",
     "description": "your description",
     "main": "dist/index.cjs.js",
     "scripts": {