I can’t get “block” CSS to work on mobile.
-
Hey there; This is a very valuable plugin and I’m super stoked you created it. However, I’m experiencing major issues with the CSS styling. I’ve made changes to the styling to make it look better, but the original style and my new style both don’t work on my iPhone. The style works, but the “inline-block” and “block” properties don’t.
https://grafikdesigngroup.com/our-etsy-shop
/*———————————————————————————–*/
/* ETSY SHOP
/*———————————————————————————–*/.etsy-shop-listing-table {
border: 0px !important;
}td.etsy-shop-listing {
border: 0px !important;
}.etsy-shop-listing-card {
background-color: white;
border: 1px solid #EAEAEA;
display: inline-block;
width: auto; /* MY-EDIT – Was 172px */
min-width: 200px; /* MY-EDIT – Added this. */
min-height: 200px; /* MY-EDIT – Added this. */
text-align: center;
padding: 12px; /* MY-EDIT – Was 6px */
/* font-family: Arial,Helvetica,sans-serif; */
font-size: 12px;
margin-top: 12px;
margin-right: 7px;
margin-bottom: 10px;
margin-left: 10px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); /* MY-EDIT – Added this to make items match Woocommerce listings. */
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-card {
background-color: white;
border: 1px solid #EAEAEA;
display: inline-block;
width: auto; /* MY-EDIT – Was 172px */
min-width: 200px; /* MY-EDIT – Added this. */
min-height: 200px; /* MY-EDIT – Added this. */
text-align: center;
padding: 12px; /* MY-EDIT – Was 6px */
/* font-family: Arial,Helvetica,sans-serif; */
font-size: 12px;
margin-top: 12px;
margin-right: 12px;
margin-bottom: 10px;
margin-left: 12px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); /* MY-EDIT – Added this to make items match Woocommerce listings. */
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
}.etsy-shop-listing {
border-top: 0;
}
@media all and (max-width: 768px){ /* MY-EDIT – This property didn’t exist before. It puts LESS space between the page title and the first page content on a smart phone. */
.etsy-shop-listing {
width: 100%;
}
}.etsy-shop-listing-thumb {
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
size: 100%;
/* height: 100%; /* MY-EDIT – Added this. */
/* width: 100%; /* MY-EDIT – Added this. */
}.etsy-shop-listing-thumb img {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
padding: 0px;
img-size: 100%;
/* height: 100%; /* MY-EDIT – Added this. */
/* width: 100%; /* MY-EDIT – Added this. */
border: 1px solid #EAEAEA;
}.etsy-shop-listing-detail {
margin: 0;
padding: 0;
text-align: left;
}.etsy-shop-listing-title {
height: 17px;
line-height: 17px !important; /* MY-EDIT – Was 15. */
padding: 0;
margin-top: 5px;
overflow: hidden;
}.etsy-shop-listing-title a {
color: #666;
text-decoration: none;
border-bottom: none;
}.etsy-shop-listing-title a:hover{
text-decoration: underline;
}.etsy-shop-listing-maker {
line-height: 16px !important; /* MY-EDIT – Was 14. */
margin: 0;
padding: 0;
}
@media all and (max-width: 768px){
.etsy-shop-listing-maker {
font-size: 19px;
}
}.etsy-shop-listing-card a {
text-decoration: none;
border-bottom: none;
}.etsy-shop-listing-maker a {
color: #B2B2B2;
text-decoration: none;
border-bottom: none;
padding: 0;
margin: 0;
margin-right: 6px; /* MY-EDIT – Added this to create space between Available and price. */
line-height: 14px; /* MY-EDIT – Added this. Affects price. */}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-maker a {
/* margin-right: 3px; */
line-height: 14px;
}
}.etsy-shop-listing-maker a:hover{
text-decoration: underline;
}.etsy-shop-listing-price {
color: #5DA823: /* Green #5DA823; */
float: left; /* MY-EDIT – Added this to create space between Available and price. */
line-height: 15px !important; /* MY-EDIT – Was 14. */
margin-top: -14px;
margin-right: 10px; /* MY-EDIT – Added this to create space between Available and price. */
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-price {
margin-right: 8px;
}
}.etsy-shop-currency-code {
font-size: 14px; /* MY-EDIT – Was 10px */
}
-
So my friend Carl came to the rescue. He looked at the code and noticed the CSS isn’t the problem, it’s the HTML table thsts being generated by the PHP.
Here’s a bit of our Messenger conversation from late last night.
“Even though the images are being wrapped in a div tag, those tags are in seperate td tags and td’s don’t float. If you can’t get rid of the table altogether, try and make it so it does.
<table width=’100%’>
<tr>
<td>and all the divs in this one cell</td>
</tr>
</table>So he went into the Etsy plugin PHP file and fixed that, and now it works! Brilliant! Thanks Carl!
Now all my custom CSS works. Yay!
And for the record, I was up late last night because I was preparing 80 files for sale in my Etsy shop. Yup, 80! It’s gonna be full full full. I hope this plugin has a pagination feature, because all 80 items are in the same Etsy “section” : ‘digital art’.
Okay, here’s the final CSS complete with all notes.
/*———————————————————————————–*/
/* ETSY SHOP
/*———————————————————————————–*/.etsy-shop-listing-table {
border: 0px !important;
text-align:center;
}/* not needed any more Carl
td.etsy-shop-listing {
border: 0px !important;
}
*/
.etsy-shop-listing-card {
background-color: #fff;
border: 1px solid #EAEAEA;
display: block;
width: 200px;
min-width: 194px; /* MY-EDIT – Was 172px */
text-align: left;
padding-top: 12px; /* MY-EDIT – Was 6px */
padding-right: 10px;
padding-bottom: 12px;
padding-left: 10px;
/* font-family: Arial,Helvetica,sans-serif; */
font-size: 12px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
margin-top: 12px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); /* MY-EDIT – Added this to make items match Woocommerce listings. */
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-card {
background-color: #fff;
border: 1px solid #EAEAEA;
display: block;
width: 100%; /* MY-EDIT – Was 172px */
padding-top: 12px; /* MY-EDIT – Was 6px */
padding-right: 0px;
padding-bottom: 12px;
padding-left: 12px;/
/* font-family: Arial,Helvetica,sans-serif; */
font-size: 16px;
text-align: left;
line-height: 18px !important; /* MY-EDIT – Was 14. */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
}
}/* added by Carl */
.etsy-shop-listing {
border-top: 0;
width:194px;
display:inline-block;
/*padding-right:20px; wasn’t needed but maybe later*/
}
/* end added by carl
@media (max-width: 667px) {
.etsy-shop-listing {
text-align:center;
}} */
.etsy-shop-listing-thumb {
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
img-size: 100%; /* MY-EDIT – Carl added this. */
}.etsy-shop-listing-thumb img {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: 1px solid #EAEAEA;
}
.etsy-shop-listing-thumb img:hover{ /* MY-EDIT – Aadded this rollover effect. */
-webkit-transform: scale(1);
opacity:0.7;
}.etsy-shop-listing-detail {
margin: 0;
padding: 0;
text-align: left;
}.etsy-shop-listing-title {
height: 17px;
font-size: 16px;
line-height: 17px !important; /* MY-EDIT – Was 15. */
margin: 0;
padding: 0;
margin-top: 5px;
overflow: hidden;
}.etsy-shop-listing-title a {
color: #666;
text-decoration: none;
border-bottom: none;
}.etsy-shop-listing-title a:hover{
text-decoration: underline;
}.etsy-shop-listing-maker {
line-height: 18px !important; /* MY-EDIT – Was 14. */
margin: 0;
padding: 0;
}.etsy-shop-listing-card a {
text-decoration: none;
border-bottom: none;
}.etsy-shop-listing-maker a { /* This is the “Available” text. */
color: #B2B2B2;
text-decoration: none;
border-bottom: none;
font-size: 14px;
line-height: 21px; /* MY-EDIT – Added this. Affects price. */
padding: 0;
margin-top: 7px;
margin-right: 0px; /* MY-EDIT – Added this to create space between Available and price. */
font-weight: normal;
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-maker a {
margin-right: 0px;
font-size: 14px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
}
}.etsy-shop-listing-maker a:hover{
text-decoration: underline;
}.etsy-shop-listing-price {
display: inline-block;
color: #78C042;
float: left; /* MY-EDIT – Added this to create space between Available and price. */
line-height: 16px !important; /* MY-EDIT – Was 14. */
margin-top: -14px;
margin-left: 70px; /* MY-EDIT – Added this to create space between Available and price. */
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-price {
margin-left: 80px;
font-size: 16px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
}
}.etsy-shop-currency-code {
font-size: 14px; /* MY-EDIT – Was 10px */
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-currency-code {
font-size: 15px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
}
}And here’s the PHP, which doesn’t have pagination.. yet.
<?php /** * @package Etsy-Shop */ /* Plugin Name: Etsy Shop Plugin URI: https://www.ads-software.com/extend/plugins/etsy-shop/ Description: Inserts Etsy products in page or post using bracket/shortcode method. Author: Frédéric Sheedy Version: 1.0 */ /* * Copyright 2011-2017 Frédéric Sheedy (email : [email protected]) * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License, version 2, as * published by the Free Software Foundation. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */ /* Roadmap to version 1.x * TODO: allow more than 100 items * TODO: customize currency * TODO: get Etsy translations * TODO: Use Transients API * TODO: Add MCE Button */ define( 'ETSY_SHOP_VERSION', '1.0'); // load translation add_action( 'init', 'etsy_shop_load_translation_file' ); // plugin activation register_activation_hook( __FILE__, 'etsy_shop_activate' ); // check for update add_action( 'plugins_loaded', 'etsy_shop_update' ); // add Settings link add_filter( 'plugin_action_links', 'etsy_shop_plugin_action_links', 10, 2 ); function etsy_shop_update() { $etsy_shop_version = get_option( 'etsy_shop_version' ); if ( $etsy_shop_version != ETSY_SHOP_VERSION ) { // upgrade logic here // initialize timeout option if not already there if( !get_option( 'etsy_shop_timeout' ) ) { add_option( 'etsy_shop_timeout', '10' ); } // initialize cache life option if not already there if( !get_option( 'etsy_shop_cache_life' ) ) { add_option( 'etsy_shop_cache_life', '21600' ); // 6 hours in seconds } // update the version value update_option( 'etsy_shop_version', ETSY_SHOP_VERSION ); } } function etsy_shop_load_translation_file() { $plugin_path = plugin_basename( dirname( plugin_basename( __FILE__ ) ) .'/translations' ); load_plugin_textdomain( 'etsyshop', false, $plugin_path ); } function etsy_shop_activate() { etsy_shop_update(); } /* === Used for backward-compatibility 0.x versions === */ // process the content of a page or post add_filter( 'the_content', 'etsy_shop_post' ); add_filter( 'the_excerpt','etsy_shop_post' ); // complements of YouTube Brackets function etsy_shop_post( $the_content ) { // if API Key exist if ( get_option( 'etsy_shop_api_key' ) ) { $etsy_start_tag = "[etsy-include="; $etsy_end_tag = "]"; $spos = strpos( $the_content, $etsy_start_tag ); if ( $spos !== false ) { $epos = strpos( $the_content, $etsy_end_tag, $spos ); $spose = $spos + strlen( $etsy_start_tag ); $slen = $epos - $spose; $tagargs = substr( $the_content, $spose, $slen ); $args = explode( ";", $tagargs ); if ( sizeof( $args ) > 1 ) { $tags = etsy_shop_process( $args[0], $args[1] ); $new_content = substr( $the_content,0,$spos ); $new_content .= $tags; $new_content .= substr( $the_content,( $epos+1 ) ); } else { // must have 2 arguments $new_content = __( 'Etsy Shop: missing arguments', 'etsyshop' ); } // other bracket to parse? if ( $epos+1 < strlen( $the_content ) ) { $new_content = etsy_shop_post( $new_content ); } return $new_content; } else { return $the_content; } } else { // no API Key set, return the content return $the_content; } } /* === END: Used for backward-compatibility 0.x versions === */ function etsy_shop_process() { $numargs = func_num_args(); switch ($numargs) { // Used for backward-compatibility 0.x versions case (2): $shop_id = func_get_arg(0); $section_id = func_get_arg(1); $listing_id = null; $show_available_tag = true; $language = null; $columns = 3; $thumb_size = 'medium'; $width = '172px'; $height = '135px'; break; case (1): $attributes = func_get_arg(0); $shop_id = $attributes['shop_name']; $section_id = $attributes['section_id']; $listing_id = $attributes['listing_id']; $show_available_tag = ( !$attributes['show_available_tag'] ? false : $attributes['show_available_tag'] ); $language = ( !$attributes['language'] ? null : $attributes['language']); $columns = ( !$attributes['columns'] ? 3 : $attributes['columns'] ); $thumb_size = ( !$attributes['thumb_size'] ? "medium" : $attributes['thumb_size'] ); $width = ( !$attributes['width'] ? "172px" : $attributes['width'] ); $height = ( !$attributes['height'] ? "135px" : $attributes['height'] ); break; default: return __( 'Etsy Shop: invalid number of arguments', 'etsyshop' ); } // Filter the values $shop_id = preg_replace( '/[^a-zA-Z0-9,]/', '', $shop_id ); $section_id = preg_replace( '/[^a-zA-Z0-9,]/', '', $section_id ); $listing_id = preg_replace( '/[^a-zA-Z0-9,]/', '', $listing_id ); //Filter the thumb size switch ($thumb_size) { case ("small"): $thumb_size = "url_75x75"; break; case ("large"): $thumb_size = "url_570xN"; break; case ("original"): $thumb_size = "url_fullxfull"; break; case ("medium"): default: $thumb_size = "url_170x135"; break; } // Filter Language if ( strlen($language) != 2 ) { $language = null; } if ( $shop_id != '' && $section_id != '' ) { // generate listing for shop section $listings = etsy_shop_getShopSectionListings( $shop_id, $section_id, $language ); if ( !get_option( 'etsy_shop_debug_mode' ) ) { if ( !is_wp_error( $listings ) ) { //$data = '<table class="etsy-shop-listing-table"><tr>'; $data = '<div class="etsy-shop-listing-table">'; $n = 0; //verify if we use target blank if ( get_option( 'etsy_shop_target_blank' ) ) { $target = '_blank'; } else { $target = '_self'; } foreach ( $listings->results as $result ) { if (!empty($listing_id) && $result->listing_id != $listing_id) { continue; } $listing_html = etsy_shop_generateListing( $result->listing_id, $result->title, $result->state, $result->price, $result->currency_code, $result->quantity, $result->url, $result->Images[0]->$thumb_size, $target, $show_available_tag, $width, $height ); if ( $listing_html !== false ) { //$data = $data.'<td class="etsy-shop-listing">'.$listing_html.'</td>'; $data = $data.'<div class="etsy-shop-listing">'.$listing_html.'</div>'; $n++; // I commented this out but it may be needed...need more items to see carl //if ( $n % $columns == 0 ) { // $data = $data.'</tr><tr>'; //} } } //$data = $data.'</tr></table>'; $data = $data.'<div style="clear:both;"></div>'; // needed to clear the float - carl } else { $data = $listings->get_error_message(); } } else { print_r( '<h2>' . __( 'Etsy Shop Debug Mode', 'etsyshop' ) . '</h2>' ); print_r( $listings ); } } else { // must have 2 arguments $data = "Etsy Shop: empty arguments"; } return $data; } // Process shortcode function etsy_shop_shortcode( $atts ) { // if API Key exist if ( get_option( 'etsy_shop_api_key' ) ) { $attributes = shortcode_atts( array( 'shop_name' => null, 'section_id' => null, 'listing_id' => null, 'thumb_size' => null, 'language' => null, 'columns' => null, 'show_available_tag' => true, 'width' => "172px", 'height' => "135px" ), $atts ); $content = etsy_shop_process( $attributes ); return $content; } else { // no API Key set, return the content return 'Etsy Shop: Shortcode detected but API KEY is not set.'; } } add_shortcode( 'etsy-shop', 'etsy_shop_shortcode' ); function etsy_shop_getShopSectionListings( $etsy_shop_id, $etsy_section_id, $language ) { $etsy_cache_file = dirname( __FILE__ ).'/tmp/'.$etsy_shop_id.'-'.$etsy_section_id.'_cache.json'; // if no cache file exist if (!file_exists( $etsy_cache_file ) or ( time() - filemtime( $etsy_cache_file ) >= get_option( 'etsy_shop_cache_life' ) ) or get_option( 'etsy_shop_debug_mode' ) ) { // if language set if ($language != null) { $reponse = etsy_shop_api_request( "shops/$etsy_shop_id/sections/$etsy_section_id/listings/active", '&limit=100&includes=Images&language='.$language ); } else { $reponse = etsy_shop_api_request( "shops/$etsy_shop_id/sections/$etsy_section_id/listings/active", '&limit=100&includes=Images' ); } if ( !is_wp_error( $reponse ) ) { // if request OK $tmp_file = $etsy_cache_file.rand().'.tmp'; file_put_contents( $tmp_file, $reponse ); rename( $tmp_file, $etsy_cache_file ); } else { // return WP_Error return $reponse; } } else { // read cache file $reponse = file_get_contents( $etsy_cache_file ); } if ( get_option( 'etsy_shop_debug_mode' ) ) { $file_content = file_get_contents( $etsy_cache_file ); print_r( '<h3>--- Etsy Cache File:' . $etsy_cache_file . ' ---</h3>' ); print_r( $file_content ); } $data = json_decode( $reponse ); return $data; } function etsy_shop_getShopSection( $etsy_shop_id, $etsy_section_id ) { $reponse = etsy_shop_api_request( "shops/$etsy_shop_id/sections/$etsy_section_id", NULL , 1 ); if ( !is_wp_error( $reponse ) ) { $data = json_decode( $reponse ); } else { // return WP_Error return $reponse; } return $data; } function etsy_shop_testAPIKey() { $reponse = etsy_shop_api_request( 'listings/active', '&limit=1&offset=0', 1 ); if ( !is_wp_error( $reponse ) ) { $data = json_decode( $reponse ); } else { // return WP_Error return $reponse; } return $data; } function etsy_shop_api_request( $etsy_request, $args = NULL, $noDebug = NULL ) { $etsy_api_key = get_option( 'etsy_shop_api_key' ); $url = "https://openapi.etsy.com/v2/$etsy_request?api_key=" . $etsy_api_key . $args; $wp_request_args = array( 'timeout' => get_option( 'etsy_shop_timeout' ) ); $request = wp_remote_request( $url , $wp_request_args ); if ( get_option( 'etsy_shop_debug_mode' ) AND !$noDebug ) { echo( '<h3>--- Etsy Debug Mode - version ' . ETSY_SHOP_VERSION . ' ---</h3>' ); echo( '<p>Go to Etsy Shop Options page if you wan\'t to disable debug output.</p>' ); print_r( '<h3>--- Etsy Request URL ---</h3>' ); print_r( $url ); print_r( '<h3>--- Etsy Response ---</h3>' ); print_r( $request ); } if ( !is_wp_error( $request ) ) { if ( $request['response']['code'] == 200 ) { $request_body = $request['body']; } else { if ( $request['headers']['x-error-detail'] == 'Not all requested shop sections exist.' ) { return new WP_Error( 'etsy-shop', __( 'Etsy Shop: Your section ID is invalid.', 'etsyshop' ) ); } elseif ( $request['response']['code'] == 0 ) { return new WP_Error( 'etsy-shop', __( 'Etsy Shop: The plugin timed out waiting for etsy.com reponse. Please change Time out value in the Etsy Shop Options page.', 'etsyshop' ) ); } else { return new WP_Error( 'etsy-shop', __( 'Etsy Shop: API reponse should be HTTP 200 <br>API Error Description:', 'etsyshop' ) . ' ' . $request['headers']['x-error-detail'] ); } } } else { return new WP_Error( 'etsy-shop', __( 'Etsy Shop: Error on API Request', 'etsyshop' ) ); } return $request_body; } function etsy_shop_generateListing($listing_id, $title, $state, $price, $currency_code, $quantity, $url, $imgurl, $target, $show_available_tag, $width = "172px", $height = "135px") { if ( strlen( $title ) > 18 ) { $title = substr( $title, 0, 25 ); $title .= "..."; } // if the Shop Item is active if ( $state == 'active' ) { if ( $show_available_tag ) { $state = __( 'Available', 'etsyshop' ); } else { $state = ' '; } // Determine Currency Symbol if ( $currency_code == 'EUR' ) { // Euro sign $currency_symbol = '€'; } else if ( $currency_code == 'GBP' ) { // Pound sign $currency_symbol = '£'; } else { // Dollar Sign $currency_symbol = '$'; } $script_tags = ' <div class="etsy-shop-listing-card" id="' . $listing_id . '" style="width:' . $width . '"> <a title="' . $title . '" href="' . $url . '" target="' . $target . '" class="etsy-shop-listing-thumb"> <img alt="' . $title . '" src="' . $imgurl . '" style="height:' . $height . ';"> </a> <div class="etsy-shop-listing-detail"> <p class="etsy-shop-listing-title"> <a title="' . $title . '" href="' . $url . '" target="' . $target . '">'.$title.'</a> </p> <p class="etsy-shop-listing-maker"> <a title="' . $title . '" href="' . $url . '" target="' . $target . '">'.$state.'</a> </p> </div> <p class="etsy-shop-listing-price">'.$currency_symbol.$price.' <span class="etsy-shop-currency-code">'.$currency_code.'</span></p> </div>'; return $script_tags; } else { return false; } } // Custom CSS add_action( 'wp_print_styles', 'etsy_shop_css' ); function etsy_shop_css() { $link = plugins_url( 'etsy-shop.css', __FILE__ ); wp_register_style( 'etsy_shop_style', $link, null, ETSY_SHOP_VERSION ); wp_enqueue_style( 'etsy_shop_style' ); } // Options Menu add_action( 'admin_menu', 'etsy_shop_menu' ); function etsy_shop_menu() { add_options_page( __( 'Etsy Shop Options', 'etsyshop' ), __( 'Etsy Shop', 'etsyshop' ), 'manage_options', basename( __FILE__ ), 'etsy_shop_options_page' ); } function etsy_shop_options_page() { // did the user is allowed? if ( !current_user_can( 'manage_options' ) ) { wp_die( __( 'You do not have sufficient permissions to access this page.', 'etsyshop' ) ); } if ( isset( $_POST['submit'] ) ) { // did the user enter an API Key? if ( isset( $_POST['etsy_shop_api_key'] ) ) { $etsy_shop_api_key = wp_filter_nohtml_kses( preg_replace( '/[^a-z0-9]/', '', $_POST['etsy_shop_api_key'] ) ); update_option( 'etsy_shop_api_key', $etsy_shop_api_key ); // and remember to note the update to user $updated = true; } // did the user enter Debug mode? if ( isset( $_POST['etsy_shop_debug_mode'] ) ) { $etsy_shop_debug_mode = wp_filter_nohtml_kses( $_POST['etsy_shop_debug_mode'] ); //die($etsy_shop_debug_mode); update_option( 'etsy_shop_debug_mode', $etsy_shop_debug_mode ); // and remember to note the update to user $updated = true; }else { $etsy_shop_debug_mode = 0; //die($etsy_shop_debug_mode); update_option( 'etsy_shop_debug_mode', $etsy_shop_debug_mode ); // and remember to note the update to user $updated = true; } // did the user enter target new window for links? if ( isset( $_POST['etsy_shop_target_blank'] ) ) { $etsy_shop_target_blank = wp_filter_nohtml_kses( $_POST['etsy_shop_target_blank'] ); //die($etsy_shop_debug_mode); update_option( 'etsy_shop_target_blank', $etsy_shop_target_blank ); // and remember to note the update to user $updated = true; }else { $etsy_shop_target_blank = 0; //die($etsy_shop_debug_mode); update_option( 'etsy_shop_target_blank', $etsy_shop_target_blank ); // and remember to note the update to user $updated = true; } // did the user enter an Timeout? if ( isset( $_POST['etsy_shop_timeout'] ) ) { $etsy_shop_timeout = wp_filter_nohtml_kses( preg_replace( '/[^0-9]/', '', $_POST['etsy_shop_timeout'] ) ); update_option( 'etsy_shop_timeout', $etsy_shop_timeout ); // and remember to note the update to user $updated = true; } // did the user enter an Cache life? if ( isset( $_POST['etsy_shop_cache_life'] ) ) { $etsy_shop_cache_life = wp_filter_nohtml_kses( preg_replace( '/[^0-9]/', '', $_POST['etsy_shop_cache_life'] ) ); update_option( 'etsy_shop_cache_life', $etsy_shop_cache_life * 3600 ); // update time in hours * seconds // and remember to note the update to user $updated = true; } } // delete cache file if ( isset( $_GET['delete'] ) ) { // did a file was choosed? if ( isset( $_GET['file'] ) ) { $tmp_directory = plugin_dir_path( __FILE__ ) . 'tmp/'; // REGEX for security! $filename = str_replace( '.json', '', $_GET['file'] ); $filename = preg_replace( '/[^a-zA-Z0-9-_]/', '', $filename ); $fullpath_filename = $tmp_directory . $filename . '.json'; if ( file_exists( $fullpath_filename ) ) { $deletion = unlink( $fullpath_filename ); } else { $deletion = false; } if ( $deletion ) { // and remember to note deletion to user $deleted = true; $deleted_file = $fullpath_filename; } } } // grab the Etsy API key if( get_option( 'etsy_shop_api_key' ) ) { $etsy_shop_api_key = get_option( 'etsy_shop_api_key' ); } else { add_option( 'etsy_shop_api_key', '' ); } // grab the Etsy Debug Mode if( get_option( 'etsy_shop_debug_mode' ) ) { $etsy_shop_debug_mode = get_option( 'etsy_shop_debug_mode' ); } else { add_option( 'etsy_shop_debug_mode', '0' ); } // grab the Etsy Target for links if( get_option( 'etsy_shop_target_blank' ) ) { $etsy_shop_target_blank = get_option( 'etsy_shop_target_blank' ); } else { add_option( 'etsy_shop_target_blank', '0' ); } // grab the Etsy Timeout if( get_option( 'etsy_shop_timeout' ) ) { $etsy_shop_timeout = get_option( 'etsy_shop_timeout' ); } else { add_option( 'etsy_shop_timeout', '10' ); } // grab the Etsy Cache life if( get_option( 'etsy_shop_cache_life' ) ) { $etsy_shop_cache_life = get_option( 'etsy_shop_cache_life' ); } else { add_option( 'etsy_shop_cache_life', '21600' ); } if ( $updated ) { echo '<div class="updated fade"><p><strong>'. __( 'Options saved.', 'etsyshop' ) .'</strong></p></div>'; } if ( $deleted ) { echo '<div class="updated fade"><p><strong>'. __( 'Cache file deleted:', 'etsyshop' ) . ' ' . $deleted_file . '</strong></p></div>'; } // print the Options Page ?> <div class="wrap"> <div id="icon-options-general" class="icon32"><br /></div><h2><?php _e( 'Etsy Shop Options', 'etsyshop' ); ?></h2> <form name="etsy_shop_options_form" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>"> <table class="form-table"> <tr valign="top"> <th scope="row"> <label for="etsy_shop_api_key"></label><?php _e('Etsy API Key', 'etsyshop'); ?> </th> <td> <input id="etsy_shop_api_key" name="etsy_shop_api_key" type="text" size="25" value="<?php echo get_option( 'etsy_shop_api_key' ); ?>" class="regular-text code" /> <?php if ( !is_wp_error( etsy_shop_testAPIKey()) ) { ?> <span id="etsy_shop_api_key_status" style="color:green;font-weight:bold;"><?php _e( 'Your API Key is valid', 'etsyshop' ); ?></span> <?php } elseif ( get_option('etsy_shop_api_key') ) { ?> <span id="etsy_shop_api_key_status" style="color:red;font-weight:bold;"><?php _e( 'You API Key is invalid', 'etsyshop' ); ?></span> <?php } ?> <p class="description"> <?php echo sprintf( __('You may get an Etsy API Key by <a href="%1$s">Creating a new Etsy App</a>', 'etsyshop' ), 'https://www.etsy.com/developers/register' ); ?></p> </td> </tr> <tr valign="top"> <th scope="row"> <label for="etsy_shop_api_key"></label><?php _e('Debug Mode', 'etsyshop'); ?></th> <td> <input id="etsy_shop_debug_mode" name="etsy_shop_debug_mode" type="checkbox" value="1" <?php checked( '1', get_option( 'etsy_shop_debug_mode' ) ); ?> /> <p class="description"> <?php echo __( 'Useful if you want to post a bug on the forum', 'etsyshop' ); ?> </p> </td> </tr> <tr valign="top"> <th scope="row"> <label for="etsy_shop_target_blank"></label><?php _e('Link to new window', 'etsyshop'); ?></th> <td> <input id="etsy_shop_target_blank" name="etsy_shop_target_blank" type="checkbox" value="1" <?php checked( '1', get_option( 'etsy_shop_target_blank' ) ); ?> /> <p class="description"> <?php echo __( 'If you want your links to open a page in a new window', 'etsyshop' ); ?> </p> </td> </tr> <tr valign="top"> <th scope="row"> <label for="etsy_shop_timeout"></label><?php _e('Timeout', 'etsyshop'); ?></th> <td> <input id="etsy_shop_timeout" name="etsy_shop_timeout" type="text" size="2" class="small-text" value="<?php echo get_option( 'etsy_shop_timeout' ); ?>" class="regular-text code" /> <p class="description"> <?php echo __( 'Time in seconds until a request times out. Default 10.', 'etsyshop' ); ?> </p> </td> </tr> <tr valign="top"> <th scope="row"> <label for="etsy_shop_cache_life"></label><?php _e('Cache life', 'etsyshop'); ?></th> <td> <input id="etsy_shop_cache_life" name="etsy_shop_cache_life" type="text" size="2" class="small-text" value="<?php echo get_option( 'etsy_shop_cache_life' ) / 3600; ?>" class="regular-text code" /> <?php _e('hours', 'etsyshop'); ?> <p class="description"> <?php echo __( 'Time before the cache update the listing', 'etsyshop' ); ?> </p> </td> </tr> <tr valign="top"> <th scope="row"><?php _e('Cache Status', 'etsyshop'); ?></th> <td> <?php if (get_option('etsy_shop_api_key')) { ?> <table class="wp-list-table widefat"> <thead id="EtsyShopCacheTableHead"> <tr> <th><?php _e('Shop Section', 'etsyshop'); ?></th> <th><?php _e('Filename', 'etsyshop'); ?></th> <th><?php _e('Last update', 'etsyshop'); ?></th> <th></th> </tr> </thead> <?php $files = glob( dirname( __FILE__ ).'/tmp/*.json' ); $time_zone = get_option('timezone_string'); date_default_timezone_set( $time_zone ); foreach ($files as $file) { // downgrade to support PHP 5.2.4 //$etsy_shop_section = explode( "-", strstr(basename( $file ), '_cache.json', true ) ); $etsy_shop_section = explode( "-", substr( basename( $file ), 0, strpos( basename( $file ), '_cache.json' ) ) ); $etsy_shop_section_info = etsy_shop_getShopSection($etsy_shop_section[0], $etsy_shop_section[1]); if ( !is_wp_error( $etsy_shop_section_info ) ) { echo '<tr><td>' . $etsy_shop_section[0] . ' / ' . $etsy_shop_section_info->results[0]->title . '</td><td>' . basename( $file ) . '</td><td>' . date( "Y-m-d H:i:s", filemtime( $file ) ) . '</td><td><a href="options-general.php?page=etsy-shop.php&delete&file=' . basename( $file ) . '" title="'. __('Delete cache file', 'etsyshop') .'"><span class="dashicons dashicons-trash"></span></a></td></tr>'; // echo '<tr><td>' . $etsy_shop_section[0] . ' / ' . $etsy_shop_section_info->results[0]->title . '</td><td>' . basename( $file ) . '</td><td>' . date( "Y-m-d H:i:s", filemtime( $file ) ) . '</td><td><a href="" title="' . _e('Delete cache file', 'etsyshop'); . '"><span class="dashicons dashicons-trash"></span></a></td></tr>'; } else { echo '<tr><td>' . $etsy_shop_section[0] . ' / <span style="color:red;">Error on API Request</span>' . '</td><td>' . basename( $file ) . '</td><td>' . date( "Y-m-d H:i:s", filemtime( $file ) ) . '</td><td></td></tr>'; } } ?></table><?php } else { _e('You must enter your Etsy API Key to view cache status!', 'etsyshop'); } ?> <p class="description"><?php _e( 'You may reset cache a any time by deleting files in tmp folder of the plugin.', 'etsyshop' ); ?></p> </td> </tr> </table> <h3 class="title"><?php _e( 'Need help?', 'etsyshop' ); ?></h3> <p><?php echo sprintf( __( 'Please open a <a href="%1$s">new topic</a> on www.ads-software.com Forum. This is your only way to let me know!', 'etsyshop' ), 'https://www.ads-software.com/support/plugin/etsy-shop' ); ?></p> <h3 class="title"><?php _e( 'Need more features?', 'etsyshop' ); ?></h3> <p><?php echo sprintf( __( 'Please sponsor a feature go to <a href="%1$s">Donation Page</a>.', 'etsyshop' ), 'https://fsheedy.wordpress.com/etsy-shop-plugin/donate/' ); ?></p> <p class="submit"> <input type="submit" name="submit" id="submit" class="button-primary" value="<?php _e( 'Save Changes', 'etsyshop' ); ?>" /> </p> </form> </div> <?php } // admin warning if ( is_admin() ) { etsy_shop_warning(); } function etsy_shop_warning() { if ( !get_option( 'etsy_shop_api_key' ) ) { function etsy_shop__api_key_warning() { echo "<div id='etsy-shop-warning' class='updated fade'><p><strong>".__( 'Etsy Shop is almost ready.', 'etsyshop' )."</strong> ".sprintf( __( 'You must <a href="%1$s">enter your Etsy API key</a> for it to work.', 'etsyshop' ), 'options-general.php?page=etsy-shop.php' )."</p></div>"; } add_action( 'admin_notices', 'etsy_shop__api_key_warning' ); } } function etsy_shop_plugin_action_links( $links, $file ) { if ( $file == plugin_basename( dirname( __FILE__ ).'/etsy-shop.php' ) ) { $links[] = '<a href="' . admin_url( 'options-general.php?page=etsy-shop.php' ) . '">'.__( 'Settings' ).'</a>'; } return $links; } ?>
Thanks for sharing, next version of the plugin, we will to a CSS clean up to make things for mobile.
Well, I posted that CSS too early. Here’s the final final version. This works perfectly now.
By the way, is there pagination in the PHP for shops like mine that will have 100’s of items in one category?
/*———————————————————————————–*/
/* ETSY SHOP
/*———————————————————————————–*/.etsy-shop-listing-table {
border: 0px !important;
/* text-align:center; */
}
/* iPhone 6 in portrait & landscape */
@media (max-width: 767px){
.etsy-shop-listing-table {
/* text-align:center; */
}
}/* not needed any more Carl
td.etsy-shop-listing {
border: 0px !important;
}
*/
.etsy-shop-listing-card {
background-color: #fff;
border: 1px solid #EAEAEA;
display: block;
min-width: 194px; /* MY-EDIT – Was 172px */
text-align: left;
padding-top: 12px; /* MY-EDIT – Was 6px */
padding-right: 10px;
padding-bottom: 12px;
padding-left: 10px;
/* font-family: Arial,Helvetica,sans-serif; */
font-size: 12px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); /* MY-EDIT – Added this to make items match Woocommerce listings. */
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
}
/* iPhone 6 in portrait & landscape */
@media (max-width: 767px){
.etsy-shop-listing-card {
background-color: #fff;
border: 1px solid #EAEAEA;
display: block;
width: 100%; /* MY-EDIT – Was 172px */
padding-top: 12px; /* MY-EDIT – Was 6px */
padding-right: 0px;
padding-bottom: 12px;
padding-left: 12px;/
/* font-family: Arial,Helvetica,sans-serif; */
font-size: 16px;
text-align: left;
line-height: 18px !important; /* MY-EDIT – Was 14. */
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
}
}/* added by Carl */
.etsy-shop-listing {
border-top: 0;
width: 194px;
display: inline-block;
/*padding-right:20px; wasn’t needed but maybe later*/
margin-left: 7px;
margin-right: 7px;
}
@media (max-width: 667px) {
.etsy-shop-listing {
text-align:center;
margin-left: 7px;
margin-right: 7px;
}} */
.etsy-shop-listing-thumb {
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
img-size: 100%; /* MY-EDIT – Carl added this. */
}.etsy-shop-listing-thumb img {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: 1px solid #EAEAEA;
}
.etsy-shop-listing-thumb img:hover{ /* MY-EDIT – Aadded this rollover effect. */
-webkit-transform: scale(1);
opacity:0.7;
}.etsy-shop-listing-detail {
margin: 0;
padding: 0;
text-align: left;
}.etsy-shop-listing-title {
height: 17px;
font-size: 16px;
line-height: 17px !important; /* MY-EDIT – Was 15. */
margin: 0;
padding: 0;
margin-top: 5px;
overflow: hidden;
}.etsy-shop-listing-title a {
color: #666;
text-decoration: none;
border-bottom: none;
}.etsy-shop-listing-title a:hover{
text-decoration: underline;
}.etsy-shop-listing-maker {
line-height: 18px !important; /* MY-EDIT – Was 14. */
margin: 0;
padding: 0;
}.etsy-shop-listing-card a {
text-decoration: none;
border-bottom: none;
}.etsy-shop-listing-maker a { /* This is the “Available” text. */
color: #B2B2B2;
text-decoration: none;
border-bottom: none;
font-size: 14px;
line-height: 21px; /* MY-EDIT – Added this. Affects price. */
padding: 0;
margin-top: 7px;
margin-right: 0px; /* MY-EDIT – Added this to create space between Available and price. */
font-weight: normal;
}
/* iPhone 6 in portrait & landscape */
@media (max-width: 767px){
.etsy-shop-listing-maker a {
margin-right: 0px;
font-size: 14px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
}
}.etsy-shop-listing-maker a:hover{
text-decoration: underline;
}.etsy-shop-listing-price {
display: inline-block;
color: #78C042;
float: left; /* MY-EDIT – Added this to create space between Available and price. */
line-height: 16px !important; /* MY-EDIT – Was 14. */
margin-top: -14px;
margin-left: 70px; /* MY-EDIT – Added this to create space between Available and price. */
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-price {
margin-left: 80px;
font-size: 16px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
}
}.etsy-shop-currency-code {
font-size: 14px; /* MY-EDIT – Was 10px */
}
/* iPhone 6 in portrait & landscape */
@media (max-width: 767px){
.etsy-shop-currency-code {
font-size: 15px;
line-height: 18px !important; /* MY-EDIT – Was 14. */
}
}So will the new version have pagination built in? I have over 100 listings and all of them show up on one page, which is a bit much for my poor iPhone. ??
I wanna know what’s the exact code to make it 5 columns and also that they can appear in the middle of the page (i mean text-align:middle)
Because your website is quite beautiful with 5 columnsYou may use this shortcode for 5 columns:
[etsy-shop shop_name="your_name" section_id="your_id" columns=5]
Just to say looking at the work you have done both fsheedy and lumdingo it does look very nice now on a desktop and mobile devices. Hopefully the next update would not require any tweaking, for users who are not able to code.
Thanks againHi,
Thanks for the solution. After fiddling with the css to my liking, somehow I got it to work on the phone by copy/pasting your .php so now I have one column nice and centered on my phone. But for some reason now it’s not reading any new css styling changes I make to the etsy-shop.css…I understand css but not php. Help would be much appreciated ??
- This reply was modified 7 years, 1 month ago by paologb.
By the way, the changes look just fine on a regular desktop browser
Thank you, this makes the plugin much more usable on a smaller screen ??
- The topic ‘I can’t get “block” CSS to work on mobile.’ is closed to new replies.