Customize the Shopping Cart - Aaron Meyers

One feature many people have requested is to customize which checkbox filters are displayed in the Shopping Cart. You may not offer "Glossy" prints, for example, yet SmugMug has a checkbox for "Glossy" that is essentially useless. If you would like to hide some of these checkboxes, use any of the following code. Add any of the following to your theme's Advanced CSS settings or drop in a CSS block on the "All Galleries" page:

Remove Filter Checkboxes

Remove the "Lustre" checkbox:
/* Remove the "Lustre" checkbox */
.sm-cart-l-finish-filters #filterLustre{
  display: none !important;
}
Remove the "Matte" checkbox:
/* Remove the "Matte" checkbox */
.sm-cart-l-finish-filters #filterMatte {
  display: none !important;
}
Remove the "Glossy" checkbox:
/* Remove the "Glossy" checkbox */
.sm-cart-l-finish-filters #filterGloss {
  display: none !important;
}
Remove the "Metallic" checkbox:
/* Remove the "Metallic" checkbox */
.sm-cart-l-finish-filters #filterMetal {
  display: none !important;
}
Remove the "Gliclee Watercolor" checkbox:
/* Remove the "Gliclee Watercolor" checkbox */
.sm-cart-l-finish-filters #filterWatercolor {
  display: none !important;
}
Remove the "Require Cropping" checkbox:
/* Remove the "Require Cropping" checkbox */
.sm-cart-l-product-filters #filterCrop {
  display: none !important;
}
Remove the "Not in my cart" checkbox:
/* Remove the "Not in my cart" checkbox */
.sm-cart-l-product-filters #filterCart {
  display: none !important;
}
Remove the "Cannot be Purchased" checkbox:
/* Remove the "Cannot be Purchased" checkbox */
.sm-cart-l-product-filters #filterPrint {
  display: none !important;
}

Remove Print Type & Sizes

You can also hide the type of print from being displayed entirely (like hiding all of the ThinWraps). SmugMug will automatically hide these if you haven't set prices for this type of print, but if you have set prices and want to disable it, you can do that as follows:
/* Hide Thin Wraps */
.productsContainer .productsList #prints_thinwrap, 
.productsContainer .productsList .productSubcategoryList:nth-of-type(6), 
#catalogPanel .subCatLinks #_prints_thinwrap {
  display: none;
}
The code above can be modified by changing the "prints_thinwrap" to the following, and the "nth-of-type" to the # before it.
1. prints_standard
2. prints_other
3. prints_pano
4. prints_square
5. prints_canvas
6. prints_thinwrap
7. prints_metal
Example:
/* Hide Metal */
.productsContainer .productsList #prints_metal, 
.productsContainer .productsList .productSubcategoryList:nth-of-type(7), 
#catalogPanel .subCatLinks #_prints_metal {
  display: none;
}

Change the Accent Colors on your Shopping Cart

/* Set the color of the buttons in the Shopping Cart */
.sm-nui .sm-button-skin-accent, 
.sm-nui a.sm-button-skin-accent, 
.sm-nui a.sm-button-skin-accent:visited {
  color: #FFFFFF !important;
  border-color: #FF7529 !important;
  background-color: #F26E21 !important;
}

/* Set the Shopping cart buttons to transition grey on mouse hover */
.sm-nui .sm-button-skin-accent:hover {
  background-color: grey !important;
  border-color: rgba(243,111,33,0.38) !important;
}

/* Set the buttons to transition to the hover color slowly */
.sm-nui .sm-button-skin-accent, 
.sm-nui .sm-button,
.sm-nui .sm-page-widget-galleries .sm-tiles .sm-tile-content,
.sm-nui .sm-page-widget-folders .sm-tiles .sm-tile-content {
  -webkit-transition: all 0.15s ease-in !important;
  -moz-transition: all 0.15s ease-in !important;
  transition: all 0.15 ease-in !important;
}

/* Change the color of the shopping cart tab (bottom) border */
.categoryTabs .yui-nav li.selected {
  border-bottom-color: #F26E21 !important;
}

/* Change the color of the shopping cart check boxes, checks */
.sm-nui .sm-form-field-checkbox-item.yui3-button-selected .sm-form-field-checkbox-icon, 
.sm-nui .sm-form-field-radio-item.yui3-button-selected .sm-form-field-radio-icon {
  color: #F26E21 !important;
}

/* Change the color of the shopping cart add item arrows */
div.sm-spinner .sm-fonticon-ArrowTriangleLeft, 
div.sm-spinner .sm-fonticon-ArrowTriangleRight {
  /* Set the opacity to 60% so it appears dim initially, then brightens when the mouse hover */
  color: rgba(243,111,33,0.6) !important;
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

/* Change the color of the shopping cart add item arrows, on hover */
div.sm-spinner .sm-fonticon-ArrowTriangleLeft:hover, 
div.sm-spinner .sm-fonticon-ArrowTriangleRight:hover {
  /* Set the opacity to 1.0 so that it brightens when the user mouses over */
  color: rgba(243,111,33,1.0) !important;
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}
Read more on dgrin here and here.

Comments

Powered by SmugMug Log In