Shopify Question posted in
The Shopify help center can be found here.

E-commerce like feature for selecting product sizes or color – Shopify

I have searched the whole web to the best of my ability on how to create an interface for selecting products just like the ones implemented in most of the major e-commerce apps(amazon,taobao,shopify..).The goal is to highlight or change the styles of the selected item in the list by simultaneously removing the styles of the previously selected item. I am trying to use react-native to clone such a feature. Any references or guides on how to do this will be highly appreciated!

    import React, { Component } from 'react';
import { View, Text ,StyleSheet, TouchableOpacity, } from 'react-native';

 class Selections extends Component {

    state={
        highlighted: false,
        id: null
    }


// The purpose of this function is to set the state to the target index on press
    indexStateHandler = (i) =>{
         if(this.state.id === null){
             this.setState({
                 id: i
             })
         }else{
             this.setState({
                 id:i
             })
         }
         console.log("index: "+i)
         console.log("state: "+this.state.id)
    }

    //The purpose of this function is to set styles for the targeted index
    highlightStateHandler = (i) =>{     
        if(this.state.id === i){
            if(!this.state.highlighted){
                this.setState({
                    highlighted:true
                })
            }
            else{
                this.setState({
                    highlighted:false
                })
            }
        }  
           }

    highlightHandler = (i) =>{

        // console.log(i)
        this.indexStateHandler(i)
        this.highlightStateHandler(i)

    }


  render() {
    return (
      <View style={styles.selectionWrapper}>
        <View style={styles.label}><Text style={{color: "black"}}>{this.props.label}</Text></View>
        <View style={styles.listContainer}>
        {this.props.options.map((options, i) => (
            <TouchableOpacity onPress={()=>this.highlightHandler(i)} key={i}>
            <View style={this.state.highlighted&&this.state.id == i?styles.highlighted:styles.options} > <Text style={styles.text}>{options}</Text> </View>
            </TouchableOpacity>
              )
        )}
        </View>
      </View>
    );
  }
}

const styles= StyleSheet.create({
    selectionWrapper:{
        width: '100%',
        height: 100,
        borderWidth: 1,
        borderColor: 'red',
    },
    label:{
        flex: 1,

    }
    ,
    listContainer:{
        flex: 3,
        flexDirection: "row",
        justifyContent: "space-around",
        alignItems: 'center',
        // backgroundColor: "#7fffd4"
    },
    options:{
        borderRadius: 10,
        padding: 5,
        borderWidth: 1,
        borderColor: "#d0b783",
        // backgroundColor: ""

    },
    text:{
        color: 'black',
        textAlign: 'center'
    },

    highlighted:{
        borderRadius: 10,
        padding: 5,
        borderWidth: 1,
        // borderColor: "#d0b783",
        backgroundColor: "#d0b783"

    }
})
export default Selections
Tags:

2

Answers


  1. 0 
    .....
.....
.....

<TouchableOpacity
style={[styles.buttonStyle,{
backgroundColor : item.id === this.state.selectedItem.id ? "red" : "blue"
}]}
>
{
...
...
}
</TouchableOpacity>

.....
.....
.....
    Login or Signup to reply.
  2. 0

    Have a look on TouchableOpacity and TouchableHighlight and try to run examples to see how they work. Also you can combine them to changing visual changes by changing styles.

        import React, { Component } from 'react' import {   AppRegistry,   StyleSheet,   TouchableOpacity,   Text,   View, } from 'react-native'

export default class App extends React.Component {   constructor(props) {
    super(props)
    this.state = {
      itemEn1: true,
      itemEn2: false,
      itemEn3: false,
    }   }

  onPress1 = () => {
    this.setState({
      itemEn1: true,
      itemEn2: false,
      itemEn3: false,
    })   } 
onPress2 = () => {
    this.setState({
      itemEn1: false,
      itemEn2: true,
      itemEn3: false,
    })   } 
 onPress3 = () => {
    this.setState({
      itemEn1: false,
      itemEn2: false,
      itemEn3: true,
    })   }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={this.state.itemEn1 ? styles.buttonEnabled : styles.buttonDisabled}
          onPress={this.onPress1}>
          <Text> Item 1 </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={this.state.itemEn2 ? styles.buttonEnabled : styles.buttonDisabled}
          onPress={this.onPress2}>
          <Text> Item 2 </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={this.state.itemEn3 ? styles.buttonEnabled : styles.buttonDisabled}
          onPress={this.onPress3}>
          <Text> Item 3 </Text>
        </TouchableOpacity>
      </View>
    )   } }

const styles = StyleSheet.create({ 
   container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10 
     }, 
    buttonDisabled: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginTop: 20 
    }, 
   buttonEnabled: {
    alignItems: 'center',
    backgroundColor: 'green',
    padding: 10,
    marginTop: 20  
     },  
    countContainer: {
    alignItems: 'center',
    padding: 10 
     },

})

    this is by map function:

    export default class DataCollector extends React.Component {

  constructor(props) {
    super(props);
    this.SendBack = this.SendBack.bind(this);
  }

  SendBack(info) {
    console.log("Key is :", info);
    this.props.callback(info);
  }

  render() {
    let testData = this.props.data.map(function (articleData, index) {
      return (
        <View key={index}>
          <TouchableOpacity
            activeOpacity={0.6}
            key={index}
            onPress={() => this.callBack([articleData.id, articleData.name])}>
          </TouchableOpacity>
        </View>
      )

    }, this);

    return (
      <View>
        {testData}
      </View>
    );
  }
}

    so now you have access to the clicked item and can use it for enable/disable etc..

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search