BuilderChild-Depot

(Difference between revisions)
Jump to: navigation, search
(Added == How to display SKU on single product pages == under = Depot & WP Ecommerce =)
(Added = How to add a SKU column in Checkout page =)
(One intermediate revision by one user not shown)
Line 1: Line 1:
 
[http://demos.ithemes.com/depot-shopp/ iThemes Builder child theme Depot demo site]
 
[http://demos.ithemes.com/depot-shopp/ iThemes Builder child theme Depot demo site]
 +
 +
= Demo site layouts & views export file =
 +
 +
Click [http://demos.ithemes.com/depot-shopp/files/builder-export-data/export-4ef254f3ee7060.63580175/builder-export-depot.zip here] to download the [http://demos.ithemes.com/depot-shopp/ Depot demo site]'s layouts & views. To import this into your Builder site, go to My Theme -> Settings -> Import / Export.
  
 
= Video overview of modules used in the layout for homepage =
 
= Video overview of modules used in the layout for homepage =
Line 149: Line 153:
 
Source: http://docs.getshopped.org/documentation/function-reference/
 
Source: http://docs.getshopped.org/documentation/function-reference/
  
= Entry 4 =
+
== How to add a SKU column in Checkout page ==
 +
 
 +
[[File:Screen Shot 2012-07-30 at 10.14.20 AM.png|412px|thumb|none|Before]]
 +
 
 +
[[File:Screen Shot 2012-07-30 at 10.08.28 AM.png|495px|thumb|none|After]]
 +
 
 +
If you would like to display product SKU in Checkout page (www.site.com/products-page/checkout/), do the following.
 +
 
 +
Edit wp-content/themes/BuilderChild-Depot/wpsc-shopping_cart_page.php.
 +
 
 +
Below
 +
 
 +
<pre class="brush:php;">
 +
<th colspan="2" ><?php _e('Product', 'it-l10n-BuilderChild-Depot'); ?></th>
 +
</pre>
 +
 
 +
add
 +
 
 +
<pre class="brush:php;">
 +
<th><?php _e('SKU', 'it-l10n-BuilderChild-Depot'); ?></th>
 +
</pre>
 +
 
 +
Below
 +
 
 +
<pre class="brush:php;">
 +
<td class="wpsc_product_name wpsc_product_name_<?php echo wpsc_the_cart_item_key(); ?>">
 +
            <a href="<?php echo wpsc_cart_item_url();?>"><?php echo wpsc_cart_item_name(); ?></a>
 +
        </td>
 +
</pre>
 +
 
 +
add
 +
 
 +
<pre class="brush:php;">
 +
<td class="wpsc_product_sku wpsc_product_sku_<?php echo wpsc_the_cart_item_key(); ?>">
 +
        <?php echo wpsc_product_sku(wpsc_cart_item_product_id()); ?>
 +
        </td>
 +
</pre>
 +
 
 +
Source: http://getshopped.org/forums/topic/how-to-show-sku/

Revision as of 23:48, July 29, 2012

iThemes Builder child theme Depot demo site

Contents

Demo site layouts & views export file

Click here to download the Depot demo site's layouts & views. To import this into your Builder site, go to My Theme -> Settings -> Import / Export.

Video overview of modules used in the layout for homepage

How to get search in Image module to look like that in Header or HTML module

05-01-2012 21-44-38.png

Add the following at the end of child theme's style.css:

/** search widget in image module */
.builder-module-image .builder-module-sidebar .widget_search {
	padding: 0;
	margin-top: 30px;
	margin-right: 1.5em;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: #EEEEEE 1px 1px 3px;
	-moz-box-shadow: #EEEEEE 1px 1px 3px;
	box-shadow: #EEEEEE 1px 1px 3px;
}
.builder-module-image .widget_search .widget-title {
	display: none;
	visibility: hidden;
}
.builder-module-image .widget_search input {
	height: 25px;
	border: 0;
	margin: 0;
	right: 0;
	float: left;
}
.builder-module-image .widget_search input[type="text"] {
	background: #F1F1F1;
	background: -webkit-linear-gradient(#F1F1F1, #FEFEFE);
	background: -moz-linear-gradient(#F1F1F1, #FEFEFE);
	background: -ms-linear-gradient(#F1F1F1, #FEFEFE);
	background: -o-linear-gradient(#F1F1F1, #FEFEFE);
	background: linear-gradient(#F1F1F1, #FEFEFE);
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 20px 0 0 20px;
	-moz-border-radius: 20px 0 0 20px;
	border-radius: 20px 0 0 20px;
}
.builder-module-image .widget_search input[type="text"]:focus {
	background:#FFFFFF;
	color: #333333;
}
.builder-module-image .widget_search input[type="submit"] {
	display: block;
	width: 35px;
	height: 25px;
	background: #e1e1e1 url('images/search-icon.png') no-repeat center center;
	background: url('images/search-icon.png') no-repeat center center, -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#f6f6f6));
	background: url('images/search-icon.png') no-repeat center center, -webkit-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -moz-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -o-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -ms-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, linear-gradient(top, #e1e1e1, #f6f6f6);
	border: 1px solid #CCCCCC;
	border-left: 0;
	text-indent: -9999px;
	text-transform: capitalize;
	-webkit-border-radius: 0 20px 20px 0;
	-moz-border-radius: 0 20px 20px 0;
	border-radius: 0 20px 20px 0;
}
.builder-module-image .widget_search input[type="submit"]:hover {
	cursor: pointer;
	background: #e1e1e1 url('images/search-icon.png') no-repeat center center;
	background: url('images/search-icon.png') no-repeat center center, -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#f6f6f6));
	background: url('images/search-icon.png') no-repeat center center, -webkit-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -moz-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -o-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -ms-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, linear-gradient(top, #e1e1e1, #f6f6f6);
	-webkit-box-shadow: inset #DDDDDD 0 0 12px;
	-moz-box-shadow: inset #DDDDDD 0 0 12px;
	-o-box-shadow: inset #DDDDDD 0 0 12px;
	box-shadow: inset #DDDDDD 0 0 12px;
}
.builder-module-image .widget_search input[type="submit"]:active {
	-webkit-box-shadow: inset #AAAAAA 0 0 2px;
	-moz-box-shadow: inset #AAAAAA 0 0 2px;
	-o-box-shadow: inset #AAAAAA 0 0 2px;
	box-shadow: inset #AAAAAA 0 0 2px;
}
.builder-module-image .right .widget_search {
	float: right;
}

Depot & WP Ecommerce

How to display SKU on single product pages

2012-03-28 14-04-55.png

By default SKU (entered in Stock Control meta box at the right side of product edit screen) will not be displayed in single product pages. To display the SKU value, WPEC's wpsc_product_sku function can be used.

An example follows.

Edit wpsc-single_product.php.

Above

</form><!--close product_form-->

add

<?php if ( wpsc_product_sku() ) : ?>
								<dl class="details">
									<dt>SKU:</dt>
									<dd><?php echo wpsc_product_sku(); ?></dd>
								</dl>
							<?php endif; ?>

Then add the following at the end of child theme's style.css:

#single_product_page_container dl {
    border-top: 1px dashed #DDDDDD;
    overflow: hidden;
    padding-top: 1em;
    margin-top: 1em;
}

#single_product_page_container dl dt {
    clear: left;
    float: left;
    font-weight: bold;
    margin-right: 5px;
}

#single_product_page_container dl dd {
    clear: right;
    display: block;
}

Source: http://docs.getshopped.org/documentation/function-reference/

How to add a SKU column in Checkout page

Before
After

If you would like to display product SKU in Checkout page (www.site.com/products-page/checkout/), do the following.

Edit wp-content/themes/BuilderChild-Depot/wpsc-shopping_cart_page.php.

Below

<th colspan="2" ><?php _e('Product', 'it-l10n-BuilderChild-Depot'); ?></th>

add

<th><?php _e('SKU', 'it-l10n-BuilderChild-Depot'); ?></th>

Below

<td class="wpsc_product_name wpsc_product_name_<?php echo wpsc_the_cart_item_key(); ?>">
            <a href="<?php echo wpsc_cart_item_url();?>"><?php echo wpsc_cart_item_name(); ?></a>
         </td>

add

<td class="wpsc_product_sku wpsc_product_sku_<?php echo wpsc_the_cart_item_key(); ?>">
         	<?php echo wpsc_product_sku(wpsc_cart_item_product_id()); ?>
         </td>

Source: http://getshopped.org/forums/topic/how-to-show-sku/

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox